用JavaScript制作站內搜索  
日期：2002年11月4日 作者：周輝騰 人氣：452 查看:[大字體 中字體 小字體]  
 
用JavaScript做的站內搜索不僅編程實現、維護起來很簡單，而且它能在客戶端瀏覽器直接執行，無須服務器的支持，也可以省去申請有腳本執行權限空間的麻煩。所以，只要你愿意動手，有個人主頁就能有自己的站內搜索。下面讓我們共同來做一個基于JavaScript的站內搜索的腳本，可不要小看它，做完了你就知道它的好處了。 
　　首先，你要編寫一個搜索表單 
，將用戶要搜索的數據提交給JavaScript函數。最簡單的代碼如下，因為是最簡單的HTML代碼，所以就不作解釋了： 
　　<form name=″search″ onsubmit=″goSearch(this)″> 
　　<input type=″text″ size=″22″ name=″searchStr″ value=″多個關鍵字請以空格隔開″ onmouseover=″this.focus()″ onfocus=″this.select()″> 
　　<select name=″select″ size=″1″> 
　　<option selected>或者(or)</option> 
　　<option>并且(and)</option> 
　　<option selected>不包含(no)</option> 
　　</select> 
　　<input type=″submit″ name=″submit″ value=″搜索″> 
　　</form> 
　　其次，要對你的站點的數據初始化。這是搜索時要用到的數據庫，站點更新只要更改這些數據就行了。對于這個數據庫，建議單獨存為一個文件，在這里我們先存為相同路徑下的″db.js″ 
　　/＊ 站點數據庫db.js開始 ＊/ 
　　function initArray(){ /＊ 定義數組初始化函數 ＊/ 
　　this.length=initArray.arguments.length; 
　　for(var i=0;i<this.length;i＋＋) this[i]=initArray.arguments[i]; 
　　} 
　　/＊ 定義待搜索的頁面的標題，沒有先后順序，應將待搜索的頁面都列出 ＊/ 
　　var titles=new initArray(′頁面標題1′,′頁面標題2′,……); 
　　/＊ 這些頁面的詳細說明，位置應該與它們的標題一致 ＊/ 
　　var descriptions=new initArray(′詳細說明1′,′詳細說明2′,……); 
　　/＊ 待搜索頁面的地址，建議使用在你站點上的相對地址，位置也應與標題、說明相一致 ＊/ 
　　var URLs=new initArray(′url1′,′url2′,……); 
　　/＊ 站點數據庫db.js結束 ＊/ 
　　第三步，初始化用戶輸入的搜索字符串，并將它傳遞給搜索函數，列出結果。 
　　function goSearch(){ 
　　var searchStr=document.search.searchStr.value; /＊ 取得表單中的用戶輸入的搜索字符 ＊/ 
　　var string1=searchStr.toLowerCase(); /＊ 轉換為小寫，避免大小寫敏感 ＊/ 
　　var length1=string1.length; 
　　var string2=′′; 
　　for(var i=0;i<3;i＋＋){ /＊ 取得搜索的字符串的各個關鍵字的邏輯關系 ＊/ 
　　if(document.search.select.options[i].selected) logic=i;} 
　　if(length1!=0＆＆string1!=′ ′＆＆string1!=′　′){ /＊ 濾掉″空″關鍵字 ＊/ 
　　for(i=0;i<length1;i＋＋){ /＊ 將表單中的用戶輸入的搜索字符串的空格轉換為″＋″號 ＊/if(string1.charAt(i)==′ ′) string2＋=′＋′; 
　　else string2＋=string1.charAt(i);} 
　　var search=string2.split(′＋′); /＊ 將轉換過的搜索字符串以″＋″為分割符分割為一個字符串數組 ＊/ 
　　uptodataSearch(search); 
　　outWin=window.open(′′,′′,′′); doc=outWin.document; 
　　if(hitCount!=0){ /＊ 如果檢索到符合要求的頁面 ＊/ 
　　doc.write(′<p>檢索結果：共有′＋hitCount＋′個頁面符合字符串：″<b><font color=″ff0000″>′＋string2＋′</font></b>″：</p><ul>′); 
　　for(i=0;i<hitCount;i＋＋){ 
　　doc.write(′<li>′); 
　　hrefmaker(titles[index[i]],URLs[index[i]],descriptions[index[i]]); /＊ 把檢索到的數據一一列出，這里調用到的鏈接生成函數hrefmaker()在下面給出 ＊/ 
　　doc.write(′</li>′);} 
　　doc.write(′</ul>′); 
　　} 
　　else doc.write(′<p>很抱歉，本站沒有關于″<b><font color=″ff0000″>′＋string2＋′</font></b>″的內容！</p>′); 
　　} 
　　else alert(′請輸入要搜索的關鍵字!′); 
　　} 
　　第四，編寫搜索函數。限于篇幅，給出的函數只有“不包含”的功能（就是輸入的多個關鍵字必須全部滿足要求才算符合搜索結果），要實現″或者″、″并且″功能請訪問以下鏈接：http://ctsight.topcool.net/documents/pt_nr2000050902.html。 
　　var hitCount=0; /＊ 全局變量hitCount，用于記錄符合搜索要求的頁數 ＊/ 
　　var index=new Array(); /＊ 全局變量數組，用于保存符合搜索要求的的頁面在″數據庫″db.js中的位置 ＊/ 
　　function uptodataSearch(searchStr){ /＊ 以經過處理的用戶輸入的搜索字符串為參數的搜索函數 ＊/ 
　　var tmpCount1=0,tmpCount2=0; 
　　var tmpStr=′′,des=′′; 
　　var length1=searchStr.length,length2=titles.length; 
　　for(var i=0;i<length2;i＋＋){ /＊ 檢索整個站點資料 ＊/ 
　　tmpStr=titles[i]＋descriptions[i]; /＊ 將本次循環的站點數據的標題與詳細內容合并，作為本次檢索的范圍＊/ 
　　des=tmpStr.toLowerCase(); /＊ 同樣將它轉化為小寫 ＊/ 
　　tmpCount1=tmpCount2; 
　　if(logic==2){ /＊ 如果邏輯關系是″不包括(not，!)″ ＊/ 
　　if(des.indexOf(searchStr[0])!=－1){ //首先必須滿足第一個關鍵字要求 
　　for(j=1;j<length1;j＋＋){ //檢索其它關鍵字 
　　if(des.indexOf(searchStr[j])==－1) tmpCount2＋＋;} 
　　if(tmpCount1==tmpCount2－length1＋1){ /＊ 只有滿足第一個關鍵字要求但不滿足其它任何一個關鍵字的才算符合檢索要求 ＊/ 
　　index[hitCount]=i; hitCount＋＋;} } } } } 
　　第五，編寫搜索頁面。 
　　OK，基于JavaScript的站內搜索完工了。試一下，感覺如何？如要與我交流，請E－mail：contion@21cn.com。