Google Ajax Search使用教程

发表于 2008年08月20日 由 neekey

最近更换主题时没有做搜索模块，首先是闲麻烦，再则Wordpress内置的搜索功能仅算一般，索性也不做搜索框了，然而有时候要找以前的存档又不方便，看到ThinkAgain博客上的Google Ajax Search功能强大，速度贼快，自己也搞了一个，期间也算历经千辛万苦，终于搞定了，先贴结果图。

先介绍一下Google Ajax Search，这是Google面向小型网站、博客推出的搜索服务，它在你的网站上内置搜索框，用AJAX方式调用结果显示在你的网站上，此过程不用访问Google的网页，增快了搜索的速度，提供更好的访客体验。

现在开始说一下如何使用吧。首先要注册一个Google Ajax Search的KEY，挺容易的，输入你的网址，如http://photozero.net ，打个勾赞成服务条款就会得到一个KEY，这个KEY只能用于这个域名下的网页调用。

接下来是把一个Javascript文件嵌入你的博客中。在博客后台打开“主题”-》“编辑主题”，找到“header.php” 这个文件编辑。把类似于

  1. <script src="http://www.google.com/jsapi?key=ABQIAAAAxbEbYoIMv2ddhn6TUcYTwhRLVF4ECcLU8-XSpyOqP4CBr2JuVBTOm1FzKI3-GU5dOFYWlWLxpqdlzA" type="text/javascript"></script>

的代码放在

  1. <head>
  2. ..
  3. </head>

之间。

这是第一步，在你的博客里面引用Google的AJAX搜索的文件。如果担心载入速度受到影响，可以把这个JS文件放在最后载入也是没有问题的。

第二步；在合适的位置放置搜索结果的标记。当用户进行搜索后，这个结果显示在你的博客的某个位置。我的建议是放置在Header之后，博客文章开始之前。我在要放的结果放一个

  1. <div id="googlesearchresult"></div><!--表示结果在这里显示-->

第三步，在合适的位置放置搜索框，如我的是在侧边栏，编辑“sidebar.php” ，在合适的位置放上标记：

  1. <div id="googlesearchcontrol"></div><!--表示搜索框在这里显示-->

第四步，也是最重要的一步，对搜索进行配置。Google Ajax Search（文档）提供了包括网页搜索、博客搜索、视频搜索、图片搜索等多项搜索服务，还可以限定结果网站（如 photozero.net ，限定在 photozero.net 里面搜索结果），相当于“站内搜索”。这一步也是比较麻烦的，如果懂得JavaScript还好说，不懂得就照例画葫芦。下面是示范代码。这是一个类似于标签式的排列方式，另一种是由上至下的排列，比较难看了点。

  1. <script language="Javascript" type="text/javascript">//<![CDATA[
  2.       google.load('search', '1.0');//载入Google Ajax Search
  3.      
  4.       function OnLoad() {
  5.  
  6.         // create a tabbed mode search control
  7.         var tabbed = new google.search.SearchControl();//创建一个控制器
  8.        
  9.         var siteSearch = new google.search.WebSearch();//实例化一个搜索器
  10.         siteSearch.setSiteRestriction("photozero.net");//限定搜索范围，相当于站内搜索了
  11.         siteSearch.setUserDefinedLabel("Photozero站内搜索");//该搜索条显示的名称
  12.        
  13.         tabbed.addSearcher(siteSearch);//将站内搜索添加到搜索器中
  14.         tabbed.addSearcher(new google.search.WebSearch());//添加Web搜索
  15.         tabbed.addSearcher(new google.search.BlogSearch());//添加博客搜索
  16.         tabbed.addSearcher(new google.search.NewsSearch());//添加新闻搜索
  17.         tabbed.addSearcher(new google.search.ImageSearch());//添加图片搜索
  18.         tabbed.addSearcher(new google.search.VideoSearch());//添加视频搜索
  19.  
  20.         // draw in tabbed layout mode
  21.         var drawOptions = new google.search.DrawOptions();//设置搜索选项
  22.         drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//以标签栏显示
  23.         drawOptions.setSearchFormRoot(document.getElementById("googlesearchcontrol"));//放置搜索框的位置，如果应用在博客以外的某些网页，搜索框要和搜索结果显示在一起，就不用这句。
  24.  
  25.         tabbed.setResultSetSize(google.search.Search.LARGE_RESULTSET);//设置搜索结果显示大小，有大（显示8条）和小（显示4条）之分
  26.         tabbed.draw(document.getElementById("googlesearchresult"), drawOptions);//设置搜索结果和选项
  27.  
  28.         //tabbed.execute("neekey");//如果要在载入时就进行搜索请添上这句
  29.       }
  30.       google.setOnLoadCallback(OnLoad, true);
  31.       OnLoad();//启用代码
  32.     //]]>
  33.     </script>

好了，把上面的代码放入网页的任意位置，就可以看到像我的博客一样的效果了。此外，还有人为这个写了插件，好像就叫Google Ajax Search，但似乎很久没更新了，我也没去试用，如果贪图方便的朋友请上官方插件目录搜索一下。

此条目发表在 wordpress 分类目录，贴了 , , 标签。将固定链接加入收藏夹。

《Google Ajax Search使用教程》有 36 条评论

  1. Chris.Ro 说：
    2008年08月20日9:22 上午

    好想有你的技术.
    可惜有心无力.
    没钱去学校啊.
    北大青鸟..4W一年…

  2. Chris.Ro 说：
    2008年08月20日10:57 上午

    我发现你永久链接很有趣.
    怎么是_不是-

  3. LD 说：
    2008年08月20日11:22 上午

    这个比我用的google基本搜索好多了，那个不能自定义

  4. Mao 说：
    2008年08月20日1:55 下午

    自定义Google搜索就很多..利用Google Ajax Search就少之又少啊..有空去搞搞

  5. 流星 说：
    2008年08月20日3:43 下午

    一看到要调整位置，就有点晕菜了……

  6. Yanxc 说：
    2008年08月20日5:57 下午

    其实永久链接还是“-”比“_”好，蜘蛛会把-识别为空格，而_不会被识别，所以google_ajax_search_tutorial 实际上被识别为googleajaxsearchtutorial

  7. Dianso 说：
    2008年08月20日10:30 下午

    google搜索快
    我也喜欢

  8. Yanxc 说：
    2008年08月21日3:02 上午

    @Dianso 难得一见，基本上没见你更新。

    少用这些插件为好，我是简约至上主义

  9. Yacca 说：
    2008年08月21日10:14 上午

    -是可以自己生成的, _可都要自己打啊…

  10. 别用鼠标点我 说：
    2008年08月21日7:33 下午

    这样做有个最大的好处就减轻数据库查询的负担~~
    对了~今天看邮箱发现贵站发了许多垃圾邮件给我，都自动加入黑名单了哦~

    • neekey 说：
      2008年08月21日10:02 下午

      汗。是什么邮件发到你的邮箱去了？你的邮箱是什么的？我觉得Gmail不错，垃圾过滤的相当牛B，它似乎不是靠发送邮件服务器来判断的，而是根据内容判断的

  11. Chris.Ro 说：
    2008年08月21日11:27 下午

    你的代码显示插件是”CoolCode”吗?
    为什么我不能在2.6使用?

    • neekey 说：
      2008年08月22日10:02 上午

      是的。
      你要在HTML编辑模式下，输入
      [左尖括号]coolcode[右尖括号]
      代码…
      [左尖括号]/coolcode[右尖括号]
      才行，请先仔细看看官方的说明书

  12. Tracy 说：
    2008年08月22日3:13 下午

    hoho，谢谢分享喔。

  13. hyden 说：
    2008年08月30日1:03 下午

    你的search效果很好

    • neekey 说：
      2008年08月30日1:53 下午

      喜欢的话就按照这个说明自己做一个，如果我的代码不够清楚，请查看我的源文件。

      • hyden 说：
        2008年08月30日2:40 下午

        恩,我会用的.
        提个建议:

        1 把搜索结果放到一个很淡(视觉上)的框架里,能起到突出内容的效果,这个应该是在自己的css中改吧.

        2 然后把那个关闭搜索结果的X放到搜索结果div右上方,这样关起来比较方便,不然非专业用户体验起来不是很好哦

  14. Pingback 引用通告： Recent Faves Tagged With "imagesearch" : MyNetFaves

  15. 纪小年 说：
    2009年01月16日11:09 上午

    这个东西！！很好，比水煮鱼的那种方法好的多。
    我先看看，等下再整

    • 纪小年 说：
      2009年01月16日11:33 上午

      有个小问题 怎么设置搜索结果的长度？

      • 纪小年 说：
        2009年01月16日11:35 上午

        额额 应该说是宽度

      • neekey 说：
        2009年01月16日11:50 上午

        这个正是我准备下一篇教程中说的，简单说：
        比如我是把搜索框和搜索结果分开来。
        你看我博客的源代码，有两个DIV，
        一个ID为searchform-wrap，即搜索框
        一个ID为googlesearchresult 即结果框
        你再用Firebug调试，发现包围搜索结果的是一个class=gsc-control，
        并且Google默认定义了gsc-control宽度为300px;
        现在要改为500来说，加入以下CSS代码
        #googlesearchresult .gsc-control{width:500px;}
        因为用ID比CLASS更优先，所以这样500px就冲掉了300px;

        同样的方法，我把Powered by Google的图标隐藏起来以配合主题
        #searchform-wrap .gsc-branding{display:none;}

        更多我的修改，你可以看我的主题的CSS文件，搜索 /* Google Ajax Search */
        部分

  16. leesum 说：
    2009年02月16日5:07 下午

    学习了，打算捣鼓下···我一直用的是自定义搜索