Google Ajax Search应用另一例

很早之前写过一个简单的例子，因为需要调整的东西太多并且容易出错，因此把那篇文章删掉了。Hoctro介绍了另一个Ajax Search，这个更实用一些。比较酷，采用了标签的形式，跟Blog结合的更紧密。示例可以看 Blogger Show，或者原作者Hoctro's Place

1.去http://code.google.com/apis/ajaxsearch/signup.html申请一个Key。

2.添加JS和CSS。这一部分添加在] ] ></b:skin>之后，或者你喜欢的位置。

<script
src='http://www.google.com/maps?file=api&amp;v=2&key=申请到的Key' type='text/javascript'/>
<script
src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=申请到的Key' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<link href='http://www.google.com/uds/css/gsearch_darkgrey.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }
/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }
/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }
/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }
/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}
</style>
<script type='text/javascript'>
var coreSearch;
function SolutionLoad() {
var controlRoot = document.getElementById("searchControl");
// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
// prep for decoupled search form
var searchFormElement = document.getElementById("searchform");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// populate - web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel("网络");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setUserDefinedLabel("Blog搜索");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setSiteRestriction("你的Blog地址");
searcher.setUserDefinedLabel("你的Blog名称");
coreSearch.addSearcher(searcher);
searcher = new GwebSearch();
searcher.setSiteRestriction("http://www.blogger.com/");
searcher.setUserDefinedLabel("Blogger搜索");
coreSearch.addSearcher(searcher);
coreSearch.draw(controlRoot, drawOptions);
}
function doCoreSearch(q) {
coreSearch.execute(q);
}
registerLoadHandler(SolutionLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}
</script>

3.通过修改HTML添加两个模块，其中一个是搜索结果，一个是搜索框。无需选中“扩展窗口小部件模板”，找到类似的以下部分：

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='相关文章' type='HTML'/>
<b:widget id='HTML5' locked='false' title='日常使用的软件' type='HTML'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='HTML1' locked='false' title='搜索订阅' type='HTML'/>
<b:widget id='Label1' locked='false' title='标签' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='存档' type='BlogArchive'/>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
<b:widget id='Feed1' locked='false' title='评论' type='Feed'/>
<b:widget id='LinkList1' locked='false' title='[+/-]链接' type='LinkList'/>
</b:section>
</div>

然后把下面的代码放在任意两个b:widget 之间：

<b:widget id='HTML41' locked='false' title='Search Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchform'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML42' locked='false' title='Search Results' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchControl'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

4.到页面元素中，拖动刚添加的两个模块到适合的位置，保存。

5.最后介绍一下自定义部分。下面这段代码是第一部分代码中的一部分，我们就是通过这部分定义的Blog搜索。其余红色的部分都是已定义的搜索，可以根据实际情况修改或去除。因为火狐浏览器会缓存js，所以如果几个博客都有这个api插件的话，就会报错,出现这种情况，请点确定。

searcher = new GblogSearch();
searcher.setSiteRestriction("你的Blog地址");
searcher.setUserDefinedLabel("Blog名字");
coreSearch.addSearcher(searcher);

相关介绍：GGpai