当在数据量不是很大，而且没有后端对应的功能接口的时候，一些简单的搜索功能基本上是前端去实现的，正好最近用到，写了一个，贴出来和大家分享：

效果图：

功能描述：

按下键盘后及时搜索条目中的汉字，汉字对应的拼音和号码；

实现思路：

先将条目中的汉字转换成拼音，然后将汉字，拼音，数字拼接成规律的字符串，放入数组，然后每次按下键盘后判断投入中的值是汉字，拼音，还是数字，然后按固定的规律去循环数组，这样就能找到对应的条目了；

启用方式：

//搜索-测试-内部-最外层div/搜索-值-输入输入框//搜索-值-列表-搜索结果显示div//search-li -搜索条目new SEarch _ ENgine(' SEarch-test-inner '，' search-value '，' search-value-list '，' SEarch-Li ')；注意：搜索条目加上两个临时数据，数据名称和数据电话，用来存储汉字和数字。

说明：拼音的转换用到了一个叫jQuery .Hz2Py-min.js的插件，由于这个插件只能转换投入里的值，所以代码里多了一个步骤，先将值放入一个临时的输入，再转换。

HTML:

复制代码代码如下： div class=' search-test-inner ' div class=' search-val-inner '输入类型='text' class='search-value '占位符='搜索ul=' 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/李李='搜索-李'数据-名称='盗贼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类=搜索-李'数据-名称='死灵法师数据-电话=' 13815963258 ' span class=' phone ' 13815963258/span span class=' name '死灵法师/span/Li Li class=' search-Li ' data-name='圣骑士数据-电话=' 13815934258 ' span class=' phone ' 13815934258/span span class=' name '圣骑士/span /li /ul /div/div

CSS:复制代码代码如下： * { padd : 0；保证金： 0；}ol，ul {列表式：无；} body { font-size : 12pxcolor: # 333}。搜索-测试-内部{ margin: 100px自动添加： 10px宽度： 400像素；背景# e0e0e 0 border-radius : 10px；箱形阴影： 1px 2px 6px # 444}.search-val-inner { margin-bottom : 20px；padding: 10px背景# fff}。成员列表内部搜索-李{ padd : 10px}.搜索值列表{ margin-top : 10px；}.搜索值列表li { padding: 5px }。成员列表内部。搜索李。电话。搜索价值列表李.电话{ float:右；}.搜索值{宽度： 100%；高度： 30px线高： 30px}.tips { font-weight : bold；}

JS:

复制代码代码如下：//- 【初始化】函数SEARCH_ENGINE(dom，searchInput，searchResultInner，searchList){ //存储拼音汉字数字的数组这个。search member array=[]；//作用对象this.dom=$(' . 'DOM)；//搜索框this.searchInput=' . 'searchInput//搜索结果框这个。search resultinner=this。多姆。查找(' . 'search result inner)；//搜索对象的名单列表this.searchList=this.dom.find(' . '搜索列表)；//转换成拼音并存入数组这个.转换拼音拼音();//绑定搜索事件这个。搜索活动事件()；}SEARCH_ENGINE.prototype={ //-【转换成拼音，并将拼音、汉字、数字存入数组】转换拼音拼音：函数(){ //临时存放数据对象$(“正文”).追加('输入类型='text' class='隐藏平阴-框' ');var $拼音=$('输入。pinying-box’)；for(var I=0；我是。搜索列表。长度；i ){ //存放名字，转换成拼音$拼音。瓦尔(这个。搜索列表。方程式(一)).attr('数据名称')；//汉字转换成拼音定义变量拼音=$拼音。toPinyin().toLowerCase().替换(/s/g ' ')；//汉字var cnCharacter=this。搜索列表。方程式(一).attr('数据名称');//数字var digital=这个。搜索列表。方程式(一).attr('数据电话');//存入数组this.searchMemberArray.push(拼音' ' cnCharacter ' '数字);} //删除临时存放数据对象$拼音。移除()；}, //- 【模糊搜索关键字】fuzzySearch :函数(类型，val){ var s；var returnArray=[]；//拼音if(type==='拼音){ s=0；} //汉字else if(type===' CNcharacter '){ s=1；} //数字else if(type===' digital '){ s=2；} for(var I=0；这个。searchmemberrarray。长度；i ){ //包含字符if(this.searchMemberArray[i]).拆分(" ")[s].indexOf(val)=0){ returnarray。推(这个。search memberarray[I])；returnArray}，//-【输出搜索结果】postMemberList :函数(TempArray){ var html=' '；//有搜索结果if(TempArray。长度0){ html=' Li class=' tips '搜索结果(“TempArray。长度”)/李；for(var I=0；itemparray . lengthi){ var Sarray=tempArray[I].拆分("");html=' lih tml=' span class=' phone ' ' SarRay[2]'/span；html=' span class=' name ' ' SarRay[1]'/span；html='/Li '；} } //无搜索结果else{ if($(this.searchInput)).val()！=''){ html='li class='tips '无搜索结果……/李；} else { this。搜索结果内部。html(" ")；} }这个。搜索结果内部。html(html)；}, //- 【绑定搜索事件】searchActiveEvent :函数(){ var searchEngine=this$(文档)。on('keyup '，this.searchInput，function(){ //临时存放找到的数组var tempArray=[]；var val=$(this).val()；//判断拼音的正则var pinyingrule=/^[a-za-z]$/；//判断汉字的正则var cnCharacterRule=新RegExp('^[u4E00-u9FFF] $ '，' g ')；//判断整数的正则var digitalRule=/^[- ]？(d ).d)？$/;//只搜索3种情况//拼音if(PinInRule。test(val)){ tempArray=搜索引擎。fuzzySearch('拼音，val)；} //汉字else if(cncharacterrule。test(val)){ tempArray=搜索引擎。fuzzysearch(' cnCharacter '，val)；} //数字else if(digitalrule。test(val)){ tempArray=搜索引擎。fuzzysearch(' digital '，val)；} else {搜索引擎。搜索结果内部。html(' Li class=' tips ')无搜索结果……/李')；}搜索引擎。post member list(TempArray)；});}};

效果是不是非常棒呢，小伙伴们美化下就可以用到自己项目中了