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