定制一个支持AJAX的Google搜索条

2008 10 31 12:19 AM 3515次查看

分类：Discuz! 标签：AJAX, Discuz!, Google

参考了这篇帖：
http://www.discuz.net/thread-1094297-1-2.html

这个搜索结果会直接显示在新层，不会新开窗口和刷新。由于外链Google的js很影响载入速度，效果我就不在论坛演示了，只发个搜索时的效果图（点击可放大）。


实现如下：
首先要有自己的Google账号，然后登录这个URL：
http://www.google.com/coop/manage/cse/

点新建搜索引擎，然后依次填写即可。如果不想显示其他网站的内容，把“仅我选择的网站”和“不在结果页上展示广告”勾上。
建好后可以得到一段代码，找到你的key，类似这样的：014649656834356649210:6zfmrnpka7e。
在“高级”页面的下方有个链接，可以创建一个ajax型的搜索引擎，然后又获得一个key，类似这样的：ABQIAAAAtkGogYUaJsfN9WoGTmE-qxR2Tp0mFBggl3LeMive4IVNqlTXdxTIpu79OnuBgEDWlHwroydC0KJb9Q。

然后编辑模板文件夹下的discuz.htm，搜索这段代码：
<script type="text/javascript" src="forumdata/cache/google_var.js"></script>
<script type="text/javascript" src="include/javascript/google.js"></script>
替换成下面的代码：

<form action="" id="searchbox_google" onsubmit="return false;">
  <div>
	<input type="text" name="q" size="40"/>
	<input type="submit" value="Google一下"/>
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_google&lang=zh-Hans"></script>
<div id="results_google" style="display:none">
  <div class="cse-closeResults"><a>× 关闭</a></div>
  <div class="cse-resultsContainer"></div>
</div>
<link rel="stylesheet" type="text/css" href="http://www.google.com/cse/api/overlay.css" />
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAtkGogYUaJsfN9WoGTmE-qxR2Tp0mFBggl3LeMive4IVNqlTXdxTIpu79OnuBgEDWlHwroydC0KJb9Q" type="text/javascript"></script>
<script src="http://www.google.com/cse/api/overlay.js" type="text/javascript"></script>
<script type="text/javascript">function OnLoad() {new CSEOverlay("014649656834356649210:6zfmrnpka7e",$("searchbox_google"),$("results_google"));}GSearch.setOnLoadCallback(OnLoad);</script>
请搜索替换自己的key。

最后去后台开启Google搜索，即可看到效果。（我只放在首页了，其他页面请自己改模板。）

如果怕影响速度的话，这些js和css也可放在页面底部，还可以将放在自己的网站，避免被Google拖慢。

1条评论 你不来一发么↓ 顺序排列 倒序排列

    向下滚动可载入更多评论，或者点这里禁止自动加载。

    想说点什么呢？