當在數據量不是很大，而且沒有後端對應的功能接口的時候，一些簡單的搜索功能基本上是前端去實現的，正好最近用到，寫了一個，貼出來和大家分享：
效果圖：
功能描述：
按下鍵盤後及時搜索條目中的漢字，漢字對應的拼音和號碼；
實現思路：
先將條目中的漢字轉換成拼音，然後將漢字，拼音，數字拼接成規律的字符串，放入數組，然後每次按下鍵盤後判斷 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);
});
}
};
效果是不是非常棒呢，小伙伴們美化下就可以用到自己項目中了