2008年8月3日星期日

杀手级应用,把横向和侧边式ajax搜索结合起来放进你的博客(08-8-3update)

2008年8月3日更新,因为google jsapi的作用,去掉了原来臃肿的23kCSS脚本。

Google 搜索API升级了控制系统。现在可以任意把搜索结果和搜索本身分开放在其他地方了。
只是单纯把搜索框和搜索结果分开没有什么意思,所以干脆更进一步把搜索结果也分成两部分~~

像我博客目前这样,主要搜索本博客的结果出现在博客中间,搜索一些不相干的内容如全部博客,新闻,视频,图书,地图都放在了侧边栏。大家可以搜索看看,是不是比以前更直观了更方便?!o(∩_∩)o...哈哈!开心~~

当然,具体哪些搜索放在中间,哪些放在旁边都是大家自己可以设定的。而且这次变更会让你的博客打开速度更快,因为现在搜索会在整个博客加载完成以后再加载~~

安装方法:首先第一步在下面的网址申请一个google AJAX搜索API的key :http://code.google.com/apis/ajaxsearch/signup.html 很容易就能申请到,只需输入你要申请的网址,然后同意google条款,确定~~得到一个key的代码。如果你的博客地址寄存在blogspot的域名下,那么可以直接使用blogspot.com的通用key:ABQIAAAAWnca3cebCQY1AVQgCmo_BRRexG7zW5nSjltmIc1ZE-b8yotBWhT99ZWGANTblVeVm16pTdxk3-Ao4w

第二步:把下面的代码加入你的排头, 正好放在 ] ] ></b:skin> 后面, </head> 前面。

]]></b:skin>
<script src="http://www.google.com/jsapi?key=ABQIAAAAWnca3cebCQY1AVQgCmo_BRRexG7zW5nSjltmIc1ZE-b8yotBWhT99ZWGANTblVeVm16pTdxk3-Ao4w" type="text/javascript"/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("search", "1");
function initialize() {

// create a search control
var searchControl = new GSearchControl();

// web search, open, alternate root
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere_else"));
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("GG派");
blogSearch.setSiteRestriction("http://ggpi.blogspot.com");
searchControl.addSearcher(blogSearch, options);
siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("互联网");
siteSearch.setSiteRestriction("012783045486823201394:5kgglhdahug");
searchControl.addSearcher(siteSearch, options);

searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GlocalSearch());

// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("search_control"));

// execute an inital search
searchControl.execute(initSearch);
}
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
.gsc-control {
width: 95%;
}
</style>

</head>

注意你可以把上面深红色的KEY替换成你自己第一步申请到的key。

把后面深红色的我的GG派的名称和网址,替换成你的博客的名称和网址。

最后保存模板。

第三步,切换到页面元素(会出现弹出窗,英文意思是说你申请的key不对头,点确定忽略之!)。

新建两个页面元素,分别放进以下代码:
<div id="somewhere_else">读取中/Loading...</div>
上面代码放进的页面元素将显示分离出来的搜索结果。

<div id="search_control">读取中/Loading...</div>
上面代码放进的页面元素将显示搜索框和搜索框下面的搜索结果。

注意上面两个页面元素的代码“读取中/Loading...”是可以改成任何文字或图片的,例如我把其中一个改成了flash的读取中了:)具体如何显示flash或图片,请参考我的这篇文章

是的,这里就已经完工了,非常简单吧!

以上为最简单的傻瓜安装方法。下面讲高级定制方案:

如何具体定制你想要搜索内容出现在哪里呢?秘诀就在第二步代码这里:

siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("互联网");
siteSearch.setSiteRestriction("012783045486823201394:5kgglhdahug");
searchControl.addSearcher(siteSearch, options);

看到我上面引用的两处深色代码没有?
012783045486823201394:5kgglhdahug 是你的自定义搜索可以得到的key,由此你就可以把自己的自定义搜索也加到ajax搜索里来了。如果你不知道什么是自定义搜索,不要在意我说的话……

注意到这一行代码searchControl.addSearcher(siteSearch, options);的深色部分, options就表示这个搜索结果会显示在分离出来的搜索结果里。

例如第二步代码里的这一行代码searchControl.addSearcher(new GblogSearch());
就代表了在搜索框下面出现的博客搜索结果。如果想要博客搜索结果出现在分离出来的搜索结果里,就把, options加进去,代码变更为:

searchControl.addSearcher(new GblogSearch(), options);

即可。

21 评论:

sz-iris 说...

不错!不过有个问题,以前的怎么办?删除还是保留?好像以前不是放在 /head前面的...你帮我弄的我不懂...今天的两个都不怎么懂弄..郁闷..

GG 说...

...到时候我有时间心情再帮你搞吧。

原来的要删除很简单,在页面元素里把那个页面元素删除,然后对照这个CSS文件:http://www.google.com/uds/css/gsearch.css

把你CSS里一样的东西都删除就可以了~~

Adrian 说...

如何具体定制你想要搜索内容出现在哪里,这个方法我试过了,我是按照你的代码去做的,还是不行。不过还是要谢谢你,知道我的博客实现Ajax搜索了。

GG 说...

偶有点笨,没看懂你的意思哦。

你试验什么地方有问题?

楼上那位sz-iris已经成功了哦

匿名 说...

你好,我已经按照你的方法试过了,非常不错,谢谢!同时也有一个问题就是在IE浏览器下,左下角出现一个“网页上有错误”提示和错误符号,不知道如何处理,谢谢

GG 说...

把你博客地址发出来,我去看一下吧。

不方便发的话,直接发到我邮箱bloggergo@gmail.com 。

个人很开放,任何内容吓不倒我,并且会为你保密,请放心。

Adrian 说...

to GG:我已经明白了,谢谢你:)

0xNone 说...

我也试过了,就是不能在指定的地方显示结果

Vane 说...

求助!我用了options,但无法分离显示结果,什么原因?

GG 说...

var options = new GsearcherOptions();

把上面这行代码加在前面~~

GG 说...

我去看了Vane's zone 的博客,你的结果没有分离是因为你没有把第三步的两个div分开放!

请仔细阅读文章 !谢谢 !!

MaCALLY氧气吧 说...

谢谢GG的分享,你可真是专业撒!
我有个问题想问一下,就是添加2个div元素后,就会显示2个--读取中/Loading...
很难看!!请问怎么处理?
我的处理方法是,根据模板风格,将要显示的内容放在网页的下方了!

GG 说...

不喜欢读取中/Loading... 就把"读取中/Loading..."删除就好了!

Greatlee 说...

我的侧边拦宽度是180,我把这个搜索成功地放上去后,发现有点长,现实得不太美观,想请教如何解决哈

GG 说...

.gsc-control {
width: 95%;
}

看我上面的代码,那个95%就是定义这个的,你可以设定为90%之类

Greatlee 说...

我设成50%也没有反应哈
兄弟加我qq号码,我的网络代理速度可慢了
你回得真快,我问完后不停地刷新等你呢呵呵
我的号码5186510

匿名 说...

google官方博客的模板挺清爽的,不知道博主能不能提供一下。

hguei 说...

這個就厲害了!等我哪天有時間來研究放上去!

Admin 说...

请教GG,侧边的如何做到像你这样不会自动扩展?

GG 说...

options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
这一行改成
options.setExpandMode(GSearchControl.EXPAND_MODE_PARTIAL);
为半开。

var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_CLOSED);
为关闭。
后面的代码也要改成
searchControl.addSearcher(new GwebSearch(), options);
才能应用这个属性~

Admin 说...

已了解,原来这么简单,谢啦^^

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆