基于javascript實(shí)現(xiàn)的搜索時自動提示功能
更新時間：2014年12月26日 16:49:50 投稿：hebedich
這篇文章主要介紹了基于javascript實(shí)現(xiàn)的搜索時自動提示功能，非常實(shí)用，推薦給需要的小伙伴參考下。
當(dāng)在數(shù)據(jù)量不是很大，而且沒有后端對應(yīng)的功能接口的時候，一些簡單的搜索功能基本上是前端去實(shí)現(xiàn)的，正好最近用到，寫了一個，貼出來和大家分享：
效果圖：
功能描述：
按下鍵盤后及時搜索條目中的漢字，漢字對應(yīng)的拼音和號碼；
實(shí)現(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);
});
}
};
效果是不是非常棒呢，小伙伴們美化下就可以用到自己項(xiàng)目中了
您可能感興趣的文章:
- JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法
- PHP 實(shí)現(xiàn)類似js中alert() 提示框
- js實(shí)現(xiàn)動畫特效的文字鏈接鼠標(biāo)懸停提示的方法
- JS實(shí)現(xiàn)仿中關(guān)村論壇評分后彈出提示效果的方法
- JS+CSS實(shí)現(xiàn)可拖動的彈出提示框
- js實(shí)現(xiàn)右下角提示框的方法
- 上傳文件返回的json數(shù)據(jù)會被提示下載問題解決方案
- JavaScript基礎(chǔ)教程之a(chǎn)lert彈出提示框?qū)嵗?/a>
- JavaScript實(shí)現(xiàn)動畫打開半透明提示層的方法
相關(guān)文章
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到，但是很多開發(fā)者忽視了一些性能方面的知識，如何編寫高性能javascript代碼呢？接下來，小編跟大家一起學(xué)習(xí)2015-10-10
Javascript-Mozilla和IE中的一個函數(shù)直接量的問題
Javascript-Mozilla和IE中的一個函數(shù)直接量的問題...2007-01-01
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js...2006-12-12
JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法,可實(shí)現(xiàn)點(diǎn)擊頂部數(shù)據(jù)項(xiàng)標(biāo)題實(shí)現(xiàn)對應(yīng)數(shù)據(jù)列的排序效果,涉及javascript鼠標(biāo)事件及數(shù)據(jù)排序的技巧,需要的朋友可以參考下2015-05-05
JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦
下面小編就為大家?guī)硪黄狫avaScript幾種數(shù)組去掉重復(fù)值的方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2016-04-04
chartjs只能基于canvas,雖然只有英文文檔,但定制化程度更高,社區(qū)成熟,功能就更加穩(wěn)定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社區(qū)庫,另外ECharts.js還支持3d效果的圖表,相當(dāng)炫酷,國內(nèi)開發(fā)者大多數(shù)使用這個,有中文文檔2023-10-10
關(guān)于JS彈出層的顯示與隱藏，在網(wǎng)上可以搜到很多的類似教程，本文實(shí)現(xiàn)了一下，喜歡的朋友不要錯過2013-12-12
java必學(xué)必會之static關(guān)鍵字，static關(guān)鍵字是很多朋友在編寫代碼和閱讀代碼時碰到的比較難以理解的一個關(guān)鍵字，下面結(jié)合大家一起學(xué)習(xí)static關(guān)鍵字2015-12-12
點(diǎn)擊提交按鈕后按鈕變灰色不可用狀態(tài)的三種方法
當(dāng)點(diǎn)擊提交后，提交按鈕變灰色不可用，這樣可有效防止重復(fù)提交，本代碼就是實(shí)現(xiàn)這樣一個功能2013-09-09
JavaScript中存在幾種對URL字符串進(jìn)行編碼的方法：escape()，encodeURI()，以及encodeURIComponent()。這幾種編碼所起的作用各不相同。2011-01-01