杀手级应用，把横向和侧边式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);

即可。