当在数据量不是很大，而且没有后端对应的功能接口的时候，一些简单的搜索功能基本上是前端去实现的，正好最近用到，写了一个，贴出来和大家分享：
效果图：
功能描述：
按下键盘后及时搜索条目中的汉字，汉字对应的拼音和号码；
实现思路：
先将条目中的汉字转换成拼音，然后将汉字，拼音，数字拼接成规律的字符串，放入数组，然后每次按下键盘后判断 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：
复制代码 代码如下:
<div>
<div>
<input type="text" placeholder="搜索">
<ul></ul>
</div>
<div>
<ul>
<li data-name="战士" data-phone="13914157895">
<span>13914157895</span>
<span>战士</span>
</li>
<li data-name="牧师" data-phone="15112357896">
<span>15112357896</span>
<span>牧师</span>
</li>
<li data-name="盗贼" data-phone="13732459980">
<span>13732459980</span>
<span>盗贼</span>
</li>
<li data-name="德鲁伊" data-phone="18015942365">
<span>18015942365</span>
<span>德鲁伊</span>
</li>
<li data-name="武僧" data-phone="15312485698">
<span>15312485698</span>
<span>武僧</span>
</li>
<li data-name="死灵法师" data-phone="13815963258">
<span>13815963258</span>
<span>死灵法师</span>
</li>
<li data-name="圣骑士" data-phone="13815934258">
<span>13815934258</span>
<span>圣骑士</span>
</li>
</ul>
</div>
</div>
CSS:
复制代码 代码如下: