基于javascript實現(xiàn)的搜索時自動提示功能
更新時間：2014年12月26日 16:49:50 投稿：hebedich
這篇文章主要介紹了基于javascript實現(xiàn)的搜索時自動提示功能，非常實用，推薦給需要的小伙伴參考下。
當(dāng)在數(shù)據(jù)量不是很大，而且沒有后端對應(yīng)的功能接口的時候，一些簡單的搜索功能基本上是前端去實現(xiàn)的，正好最近用到，寫了一個，貼出來和大家分享：
效果圖：
功能描述：
按下鍵盤后及時搜索條目中的漢字，漢字對應(yīng)的拼音和號碼；
實現(xiàn)思路：
先將條目中的漢字轉(zhuǎn)換成拼音，然后將漢字，拼音，數(shù)字拼接成規(guī)律的字符串，放入數(shù)組，然后每次按下鍵盤后判斷 input 中的值是漢字，拼音，還是數(shù)字，然后按固定的規(guī)律去循環(huán)數(shù)組，這樣就能找到對應(yīng)的條目了；
啟用方式：
// search-test-inner ---> 最外層div
// search-value ---> input 輸入框
// search-value-list ---> 搜索結(jié)果顯示div
// search-li ---> 搜索條目
new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li");
注意：搜索條目加上兩個臨時數(shù)據(jù)，data-name 和 data-phone ，用來存儲漢字和數(shù)字。
說明：拼音的轉(zhuǎn)換用到了一個叫 jQuery.Hz2Py-min.js 的插件，由于這個插件只能轉(zhuǎn)換 input 里的值，所以代碼里多了一個步驟，先將值放入一個臨時的 input ，再轉(zhuǎn)換。
HTML：
復(fù)制代碼 代碼如下:
<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="戰(zhàn)士" data-phone="13914157895">
<span class="phone">13914157895</span>
<span class="name">戰(zhàn)士</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:
復(fù)制代碼 代碼如下:
* { 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:
復(fù)制代碼 代碼如下:
//---------------------------------------------------【初始化】
function SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//存儲拼音+漢字+數(shù)字的數(shù)組
this.searchMemberArray = [];
//作用對象
this.dom = $("." + dom);
//搜索框
this.searchInput = "." + searchInput;
//搜索結(jié)果框
this.searchResultInner = this.dom.find("." + searchResultInner);
//搜索對象的名單列表
this.searchList = this.dom.find("." + searchList);
//轉(zhuǎn)換成拼音并存入數(shù)組
this.transformPinYin();
//綁定搜索事件
this.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
//-----------------------------【轉(zhuǎn)換成拼音，并將拼音、漢字、數(shù)字存入數(shù)組】
transformPinYin : function(){
//臨時存放數(shù)據(jù)對象
$("body").append('<input type="text" class="hidden pingying-box">');
var $pinyin = $("input.pingying-box");
for(var i=0;i<this.searchList.length;i++){
//存放名字，轉(zhuǎn)換成拼音
$pinyin.val(this.searchList.eq(i).attr("data-name"));
//漢字轉(zhuǎn)換成拼音
var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//漢字
var cnCharacter = this.searchList.eq(i).attr("data-name");
//數(shù)字
var digital = this.searchList.eq(i).attr("data-phone");
//存入數(shù)組
this.searchMemberArray.push(pinyin + "&" + cnCharacter + "&" + digital);
}
//刪除臨時存放數(shù)據(jù)對象
$pinyin.remove();
},
//-----------------------------【模糊搜索關(guān)鍵字】
fuzzySearch : function(type,val){
var s;
var returnArray = [];
//拼音
if(type === "pinyin"){
s = 0;
}
//漢字
else if(type === "cnCharacter"){
s = 1;
}
//數(shù)字
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;
},
//-----------------------------【輸出搜索結(jié)果】
postMemberList : function(tempArray){
var html = '';
//有搜索結(jié)果
if(tempArray.length > 0){
html += '<li class="tips">搜索結(jié)果（' + 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>';
}
}
//無搜索結(jié)果
else{
if($(this.searchInput).val() != ""){
html += '<li class="tips">無搜索結(jié)果……</li>';
}else{
this.searchResultInner.html("");
}
}
this.searchResultInner.html(html);
},
//-----------------------------【綁定搜索事件】
searchActiveEvent : function(){
var searchEngine = this;
$(document).on("keyup",this.searchInput,function(){
//臨時存放找到的數(shù)組
var tempArray = [];
var val = $(this).val();
//判斷拼音的正則
var pinYinRule = /^[A-Za-z]+$/;
//判斷漢字的正則
var cnCharacterRule = new RegExp("^[\u4E00-\u9FFF]+$","g");
//判斷整數(shù)的正則
var digitalRule = /^[-+]?d+(.d+)?$/;
//只搜索3種情況
//拼音
if(pinYinRule.test(val)){
tempArray = searchEngine.fuzzySearch("pinyin",val);
}
//漢字
else if(cnCharacterRule.test(val)){
tempArray = searchEngine.fuzzySearch("cnCharacter",val);
}
//數(shù)字
else if(digitalRule.test(val)){
tempArray = searchEngine.fuzzySearch("digital",val);
}
else{
searchEngine.searchResultInner.html('<li class="tips">無搜索結(jié)果……</li>');
}
searchEngine.postMemberList(tempArray);
});
}
};
效果是不是非常棒呢，小伙伴們美化下就可以用到自己項目中了
您可能感興趣的文章:
相關(guān)文章
tbody元素支持嵌套的注意方法...2007-03-03
因此，如果讓服務(wù)器端也可以主動發(fā)送信息到客戶端，就可以很大程度改進這些不足。WebSocket就是一個實現(xiàn)這種雙向通信的新協(xié)議。下面小編來簡單介紹下它2019-05-05
Javascript基于jQuery UI實現(xiàn)選中區(qū)域拖拽效果
這篇文章主要介紹了Javascript基于jQuery UI實現(xiàn)選中區(qū)域拖拽效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
本文主要介紹了JavaScript數(shù)組方法reduce的概述、語法、參數(shù)、工作原理等，由淺入深，便于理解。需要的朋友可以看下2016-12-12
這篇文章主要為大家詳細介紹了微信小程序地圖實現(xiàn)展示線路，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
FLASH 廣告外部鏈接實現(xiàn)代碼2008-12-12
這篇文章主要為大家介紹了2022發(fā)布ECMAScript新特性盤點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
基于JS實現(xiàn)table導(dǎo)出Excel并保留樣式
這篇文章主要介紹了基于JS實現(xiàn)table導(dǎo)出Excel并保留樣式,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了js實現(xiàn)圖片輪播效果的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript運行機制,結(jié)合實例形式分析JavaScript運行機制相關(guān)原理、使用方法及操作注意事項,需要的朋友可以參考下2020-04-04