为网站添加ajax版的谷歌自定义搜索

Tc711Com提示：其实，这不是什么新的文章了，只是前几天偶尔觉得博客里面没有一个好点的搜索，读者过来找文章会非常的费劲。于是就把主题加上了这个功能。

网上也有好多的教程了，我最早看的是自力博客的一篇文章（不过最近他网站打不开了），而且觉得他里面写的也不是太清楚，貌似是新建一个页面来放谷歌搜索的，这样还要隐藏这个页面，否则就会出现这个页面，看了几个人都是这样搞的，所以我还是用了老肥同学的教程，不过稍加改动了和简化，只要稍微复制一下就可以了（老肥里面的教程更加晦涩）。

首先要看看自己博客搜索的链接样式是什么样子的，例如我博客搜索链接样式是/?s=jquery。

其次就是添加一个搜索框了，注意看代码了

HTML

<form title=“博客全文搜索” id=“searchbox” action=“/”>
<input type=“text” class=“input” id=“s” name=“s” value=“你想找神马” onfocus=“if (this.value == ’你想找神马’) {this.value = ”;}” onblur=“if (this.value == ”) {this.value = ’你想找神马’;}”/>
</form>

还有就是看看你主题里面有没有search.php这个文件（没有了自己创建一个），这个就是主题自带的搜索，咱们现在要把他改了！我主题里面是在content里面添加的，如果不清楚的话，可以看看我搜索结果的代码。把这个东西塞进去。

HTML

<div id=“cse”>
<p class=“loading”>正在从谷歌上搜索信息…</p>
</div>
<script src=“http://www.google.com/jsapi” type=“text/javascript”></script>
<script type=“text/javascript”>
google.load(‘search’, ’1′, {language : ’zh-CN’});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl(’012549504279090021325:6g3anyuhmok’);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw(‘cse’);
var match = location.search.match(/s=([^&]*)(&|$)/);
if(match && match[1]){
var search = decodeURIComponent(match[1]);
customSearchControl.execute(search);
}
});
</script>

注意看CustomSearchControl，这个后面括号的要换成你在Google CSE获取的数字。貌似如果有做主题的话，如果能把这个添加到主题后台选项就好了，直接把参数什么的传到这里。

这样基本上就搞定功能了，样子就看你自己怎么搞了，谷歌可以自定义样式，但是我觉得里面稍微和我主题不太相符，就稍微的改了改css，如果是搜索页面的话，会单独加载一些css进去，不过也好看不到那里去……

写完了，看了看，觉得自己写的东西也是比较晦涩难懂的，不知道能有几个人看懂，不过大概就是复制什么的就可以了，真是搞不定了，就去看老肥同学的这篇文章吧。

最近对主题又稍微的美化了下图片，进来狂按Ctrl+F5，多刷新几次就可以看到变化了，不过这个就和找茬游戏一样，眼细点才能看的出来。还有就是如果访问博客的时候，突然错位或者有些功能不能用了，不用担心，那是我在折腾博客呢。

更多的为网站添加ajax版的谷歌自定义搜索请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2012-11-10