html订单搜索查找判断提示,基于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：

• 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);

});

}

};

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