當在資料量不是很大，而且沒有後端對應的功能介面的時候，一些簡單的搜尋功能基本上是前端去實現的，正好最近用到，寫了一個，貼出來和大家分享：
效果圖：
功能描述：
按下鍵盤後及時搜尋條目中的漢字，漢字對應的拼音和號碼；
實現思路：
先將條目中的漢字轉換成拼音，然後將漢字，拼音，數字拼接成規律的字串，放入數組，然後每次按下鍵盤後判斷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：
-
13914157895
戰士
-
15112357896
好友
-
13732459980
盜賊
-
18015942365
德魯伊
-
15312485698
武僧
-
13815963258
死靈法師
-
13815934258
聖騎士
CSS：
* { 填充：0；保證金：0； }
ol , ul { 列表樣式：無； }
正文 { 字體大小：12px;顏色：#333； }
.search-test-inner { 邊距：100px 自動；內邊距：10px；寬度：400px；背景：#e0e0e0；邊框半徑：10px；框陰影：1px 2px 6px #444； }
；框陰影：1px 2px 6px #444； }
；框陰影：1px 2px 6px #444； }
.search-val-inner { 邊距底部：20px;內邊距：10px；背景：#fff； }
.member-list-inner .search-li { 填入：10px; }
.search-value-list { 邊距頂部：10px; }
.search-value-list li { 填充：5px; }
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: right; }
.search-value { 寬度：100%；高度：30px；行高：30px； }
.tips { 字型粗細：粗體； }
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('');
var $pinyin = $("input.pingying-box");
for(var i=0;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
//包含字元
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 = '
搜尋結果（'tempArray.length'）';
for(var i=0;i
var sArray = tempArray[i].split("&");
html = '';
html = '' sArray[2] '';
html = '' sArray[1] '';
html = '';
}
}
//無搜尋結果
其他{
if($(this.searchInput).val() != ""){
html = '無搜尋結果…';
}其他{
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("拼音",val);
}
//漢字
else if(cnCharacterRule.test(val)){
tempArray = searchEngine.fuzzySearch("cnCharacter",val);
}
//數字
else if(digitalRule.test(val)){
tempArray = searchEngine.fuzzySearch("digital",val);
}
其他{
searchEngine.searchResultInner.html('無搜尋結果…');
}
searchEngine.postMemberList(tempArray);
});
}
};
效果是不是非常棒呢，小夥伴們美化下就可以用到自己專案中了
