德国开元华人社区 开元周游

标题: 关于站内搜索的高级解决方案 [打印本页]
作者: taohui    时间: 27.1.2011 13:04
标题: 关于站内搜索的高级解决方案
前面有一位开元会员在本版问站内搜索的问题，他还没有数据库等的概念，怎么样搞定站内搜索呢？我下面就介绍一个站内搜索比较好的用法
搜索谁最强？google!
我们就直接利用google提供的search API来实现，并且实现google的instant效果，直接在框内输入文字就能看到结果，尽量输入旅游相关的，因为这是个旅游网站
演示：http://www.kaiyuan.eu/view_websearch.html

说明：
1，webSearch.setSiteRestriction('www.kaiyuan.eu');限定搜索范围为www.kaiyuan.eu站内
2，最下面的CSS是隐藏google的一些信息，按照我现在的模式按钮这些可以去掉了
api手册：http://code.google.com/apis/websearch/docs/
  1. <script src="https://www.google.com/jsapi" type="text/javascript"></script>

  3. <script language="JavaScript">
  4. google.load('search', '1');

  6. var timerId;
  7. var input;
  8. var lastSearch = 0;
  9. var contentDiv;

  11. function search(query) {
  12.   lastSearch++;
  13.   webSearch = new google.search.WebSearch();
  14.   webSearch.setSiteRestriction('www.kaiyuan.eu');
  15.   webSearch.setSearchCompleteCallback(this, searchComplete, [webSearch, lastSearch]);
  16.   webSearch.execute(query);
  17. }

  19. function autoSearch() {
  20.   var query = this.value;
  21.   if (timerId) {
  22.     window.clearTimeout(timerId);
  23.     timerId = null;
  24.   }
  25.   timerId = window.setTimeout('search(\'' + query + '\')', 250);

  27. }

  29. function searchComplete(searcher, searchNum) {
  30.   if (searchNum == lastSearch) {
  31.     var lastResults = document.getElementById('results');
  32.     if (lastResults) {
  33.       lastResults.parentNode.removeChild(lastResults);
  34.     }

  36.     var results = searcher.results;
  37.     var newResultsDiv = document.createElement('div');
  38.     newResultsDiv.id = 'results';
  39.     for (var i = 0; i < results.length; i++) {
  40.       var result = results[i];
  41.       var resultHTML = '链接地址:<a href="' + result.unescapedUrl + '" target="_blank"><em>' +
  42.                         result.unescapedUrl + '</em></a><br />标题:' + result.title + '<br />内容提要:' + result.content +
  43.                         '<br/><br/>';
  44.       newResultsDiv.innerHTML += resultHTML;
  45.     }
  46.     contentDiv.appendChild(newResultsDiv);
  47.   }
  48. }

  50. function OnLoad() {
  51.   contentDiv = document.getElementById('content');
  52.   input = new google.search.SearchForm(true, contentDiv);
  53.   input.input.onkeyup = autoSearch;
  54.   input.setOnSubmitCallback = function() {
  55.     search(input.input.value);
  56.   };
  57. }

  59. google.setOnLoadCallback(OnLoad);

  61. </script>
  62. <style>
  63. .gsc-search-button, .gsc-clear-button, .gsc-branding{
  64. display:none;
  65. }
  66. </style>
  67. <body>
  68. <div id="content">Loading...</div>
  69. </body>
复制代码


作者: 有容乃大    时间: 27.1.2011 15:12




欢迎光临 德国开元华人社区 开元周游 (https://bbs.kaiyuan.cn/) Powered by Discuz! X3.2