基于javascript实现的搜索时自动提示功能

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

　　效果图：

　　功能描述：

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

　　实现思路：

　　先将条目中的汉字转换成拼音，然后将汉字，拼音，数字拼接成规律的字符串，放入数组，然后每次按下键盘后判断 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>

　　<ul>

　　</li>

　　</li>

　　</li>

　　</li>

　　</li>

　　</li>

　　</li>

　　</ul>

　　</div>

　　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('<input type="text" class="hidden pingying-box">');

　　var $pinyin = $("input.pingying-box");

　　for(var i=0;i<this.searchList.length;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<this.searchMemberArray.length;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 += '<li class="tips">搜索结果（' + 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>';

　　}

　　//无搜索结果

　　else{

　　if($(this.searchInput).val() != ""){

　　html += '<li class="tips">无搜索结果……</li>';

　　}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('<li class="tips">无搜索结果……</li>');

　　}

　　searchEngine.postMemberList(tempArray);

　　});

　　}

　　};

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

教程首页更多教程