用 Google Custom Search API 打造属于自己的谷歌即时搜索引擎

前段时间做创新项目，顺便研究了一下 Google Custom Search API，尝试着利用 JS 自己做了一个 Google Instant Search 页面。

Google Instant Search 无疑取得了相当大的成功，只需在搜索框中输入文字而无需按下回车键，搜索结果就会自动刷新，为用户在搜索时节省了大量时间。

Google Instant 的出现，伴随着一大波即时搜索引擎相继诞生，其中有 YouTube Instant、Facebook Instant 和 Bing Instant 等等，不过国内好像还没有做即时搜索的站点，可能因为数据量太大吧。

Google 是一个伟大的公司，它提供了免费 API 供我们调用。因此如果你拥有一个网站或者博客，我们就能打造一个调用 Google AJAX Search API 的搜索引擎，而且是即时搜索！

详细步骤

• 去 Google Custom Search 页面，用 Google Account 登陆。
• 点击“创建新的搜索引擎”。
• 填写一些基本信息，在这里我在“要搜索的网站”中填写 *.byr.cn 与 *.bupt.edu.cn，用来搜索北邮人论坛与北邮网站上的相关内容，点击下一步。
• 选择一个默认样式，当然如果你对 CSS 足够熟悉，也可以之后自己更改搜索界面的样式。选择完成后点击下一步。
• 此时我们获得了一个 “Custom Search Element 代码”，最重要的是 var cx = '…' 中的字符串，它是你的唯一 id，代表着你之前对搜索引擎所做的个性化设定。
• 幸运的是 Google AJAX Search API 已经不再需要 KEY 了，也就是说我们无需去 Google AJAX Search API 申请一个 KEY。
• 新建一个 index.html 文件。
• 搜索框部分写入如下代码（为了保持界面大方优雅，我定义了一些简单的内敛样式）：

<div id="searchbox" style="width:80%;display:block;margin:0 auto;">
  <input type="text" name="field" id="field" style="width:100%;height:50px;margin-top:50px;font-size:40px;" onkeyup="sendQuery();" />
</div>
<div id="main-content">
  <div id="cse_g" style="margin:20px;"></div>
</div>

编写 JS 代码：

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var customSearchControl = null;
function sendQuery() {
  var textNode = document.getElementById('field');
  if ((textNode.value == '')) {
    customSearchControl.clearAllResults();
  } else {
    customSearchControl.execute(textNode.value);
  }
}
google.load('search', '1', { language : 'en' });
google.setOnLoadCallback(function() {
  customSearchControl = new google.search.CustomSearchControl('<!--Your ID -->');
  customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.enableSearchResultsOnly();
  customSearchControl.draw('cse_g', options);
}, true);
</script>

大功告成，当然你也可以直接下载我的源代码，并随意修改。