當在數據量不是很大，而且沒有后端對應的功能接口的時候，一些簡單的搜索功能基本上是前端去實現的，正好最近用到，寫了一個，貼出來和大家分享：
功能描述：
按下鍵盤后及時搜索條目中的漢字，漢字對應的拼音和號碼；
實現思路：
先將條目中的漢字轉換成拼音，然后將漢字，拼音，數字拼接成規律的字符串，放入數組，然后每次按下鍵盤后判斷 input 中的值是漢字，拼音，還是數字，然后按固定的規律去循環數組，這樣就能找到對應的條目了；
啟用方式：
// search-test-inner ---> 最外層div // search-value ---> input 輸入框 // search-value-list ---> 搜索結果顯示div // search-li ---> 搜索條目 new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li");
注意：搜索條目加上兩個臨時數據，data-name 和 data-phone ，用來存儲漢字和數字。
說明：拼音的轉換用到了一個叫 jQuery.Hz2Py-min.js 的插件，由於這個插件只能轉換 input 里的值，所以代碼里多了一個步驟，先將值放入一個臨時的 input ，再轉換。
HTML：
<div class="search-test-inner"> <div class="search-val-inner"> <input type="text" class="search-value" placeholder="搜索"> <ul class="search-value-list"></ul> </div> <div class="member-list-inner"> <ul> <li class="search-li" data-name="戰士" data-phone="13914157895"> <span class="phone">13914157895</span> <span class="name">戰士</span> </li> <li class="search-li" data-name="牧師" data-phone="15112357896"> <span class="phone">15112357896</span> <span class="name">牧師</span> </li> <li class="search-li" data-name="盜賊" data-phone="13732459980"> <span class="phone">13732459980</span> <span class="name">盜賊</span> </li> <li class="search-li" data-name="德魯伊" data-phone="18015942365"> <span class="phone">18015942365</span> <span class="name">德魯伊</span> </li> <li class="search-li" data-name="武僧" data-phone="15312485698"> <span class="phone">15312485698</span> <span class="name">武僧</span> </li> <li class="search-li" data-name="死靈法師" data-phone="13815963258"> <span class="phone">13815963258</span> <span class="name">死靈法師</span> </li> <li class="search-li" data-name="聖騎士" data-phone="13815934258"> <span class="phone">13815934258</span> <span class="name">聖騎士</span> </li> </ul> </div> </div>
CSS:
* { padding: 0; margin: 0; }
ol , ul { list-style: none; }
body { font-size: 12px; color:#333; }
.search-test-inner { margin: 100px auto; padding: 10px; width: 400px; background: #e0e0e0; border-radius: 10px; box-shadow: 1px 2px 6px #444; }
.search-val-inner { margin-bottom: 20px; padding: 10px; background: #fff; }
.member-list-inner .search-li { padding: 10px; }
.search-value-list { margin-top: 10px; }
.search-value-list li { padding: 5px; }
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: right; }
.search-value { width: 100%; height: 30px; line-height: 30px; }
.tips { font-weight: bold; }
JS:
//---------------------------------------------------【初始化】 function SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){ //存儲拼音+漢字+數字的數組 this.searchMemberArray = []; //作用對象 this.dom = $("." + dom); //搜索框 this.searchInput = "." + searchInput; //搜索結果框 this.searchResultInner = this.dom.find("." + searchResultInner); //搜索對象的名單列表 this.searchList = this.dom.find("." + searchList); //轉換成拼音並存入數組 this.transformPinYin(); //綁定搜索事件 this.searchActiveEvent(); } SEARCH_ENGINE.prototype = { //-----------------------------【轉換成拼音，並將拼音、漢字、數字存入數組】 transformPinYin : function(){ //臨時存放數據對象 $("body").append('<input type="text" class="hidden pingying-box">'); var $pinyin = $("input.pingying-box"); for(var i=0;i<this.searchList.length;i++){ //存放名字，轉換成拼音 $pinyin.val(this.searchList.eq(i).attr("data-name")); //漢字轉換成拼音 var pinyin = $pinyin.toPinyin().toLowerCase().replace(/\s/g,""); //漢字 var cnCharacter = this.searchList.eq(i).attr("data-name"); //數字 var digital = this.searchList.eq(i).attr("data-phone"); //存入數組 this.searchMemberArray.push(pinyin + "&" + cnCharacter + "&" + digital); } //刪除臨時存放數據對象 $pinyin.remove(); }, //-----------------------------【模糊搜索關鍵字】 fuzzySearch : function(type,val){ var s; var returnArray = []; //拼音 if(type === "pinyin"){ s = 0; } //漢字 else if(type === "cnCharacter"){ s = 1; } //數字 else if(type === "digital"){ s = 2; } for(var i=0;i<this.searchMemberArray.length;i++){ //包含字符 if(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){ returnArray.push(this.searchMemberArray[i]); } } return returnArray; }, //-----------------------------【輸出搜索結果】 postMemberList : function(tempArray){ var html = ''; //有搜索結果 if(tempArray.length > 0){ html += '<li class="tips">搜索結果（' + tempArray.length + '）</li>'; for(var i=0;i<tempArray.length;i++){ var sArray = tempArray[i].split("&"); html += '<li>'; html += '<span class="phone">' + sArray[2] + '</span>'; html += '<span class="name">' + sArray[1] + '</span>'; html += '</li>'; } } //無搜索結果 else{ if($(this.searchInput).val() != ""){ html += '<li class="tips">無搜索結果……</li>'; }else{ this.searchResultInner.html(""); } } this.searchResultInner.html(html); }, //-----------------------------【綁定搜索事件】 searchActiveEvent : function(){ var searchEngine = this; $(document).on("keyup",this.searchInput,function(){ //臨時存放找到的數組 var tempArray = []; var val = $(this).val(); //判斷拼音的正則 var pinYinRule = /^[A-Za-z]+$/; //判斷漢字的正則 var cnCharacterRule = new RegExp("^[\\u4E00-\\u9FFF]+$","g"); //判斷整數的正則 var digitalRule = /^[-\+]?\d+(\.\d+)?$/; //只搜索3種情況 //拼音 if(pinYinRule.test(val)){ tempArray = searchEngine.fuzzySearch("pinyin",val); } //漢字 else if(cnCharacterRule.test(val)){ tempArray = searchEngine.fuzzySearch("cnCharacter",val); } //數字 else if(digitalRule.test(val)){ tempArray = searchEngine.fuzzySearch("digital",val); } else{ searchEngine.searchResultInner.html('<li class="tips">無搜索結果……</li>'); } searchEngine.postMemberList(tempArray); }); } };