当在数据量不是很大，而且没有后端对应的功能接口的时候，一些简单的搜索功能基本上是前端去实现的，正好最近用到，写了一个，贴出来和大家分享：
效果图：
功能描述：
按下键盘后及时搜索条目中的汉字，汉字对应的拼音和号码；
实现思路：
先将条目中的汉字转换成拼音，然后将汉字，拼音，数字拼接成规律的字符串，放入数组，然后每次按下键盘后判断 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:
复制代码 代码如下:
* { 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('');
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 += '';
}
}
//无搜索结果
else{
if($(this.searchinput).val() != ){
html += '无搜索结果……';
}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('无搜索结果……');
}
searchengine.postmemberlist(temparray);
});
}
};
效果是不是非常棒呢，小伙伴们美化下就可以用到自己项目中了