基于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 class="search-test-inner"> <div class="search-val-inner"> <input type="text" class="search-value" placeholder="搜索"> <ul class="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> </li> <li class="search-li" data-name="盗贼" 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 class="search-li" data-name="死灵法师" data-phone="13815963258"> <span class="phone">13815963258</span> <span class="name">死灵法师</span> </li> <li class="search-li" data-name="圣骑士" data-phone="13815934258"> <span class="phone">13815934258</span> <span class="name">圣骑士</span> </li> </ul> </div> </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);
});
}
};
效果是不是非常棒呢，小伙伴们美化下就可以用到自己项目中了
-
本文向大家介绍基于jQuery实现搜索关键字自动匹配功能，包括了基于jQuery实现搜索关键字自动匹配功能的使用技巧和注意事项，需要的朋友参考一下 今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子，希望文章能够对各位有帮助。 例子一 在项目中，有时候需要用户选择城市，但是城市太多，用户选择起来不太方便，所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写。结果示意图如下：
-
本文向大家介绍JavaScript实现搜索框的自动完成功能(一)，包括了JavaScript实现搜索框的自动完成功能(一)的使用技巧和注意事项，需要的朋友参考一下 在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图： 实现这个功能需要服务端配合。客户端通过脚
-
本文向大家介绍基于jQuery实现页面搜索功能，包括了基于jQuery实现页面搜索功能的使用技巧和注意事项，需要的朋友参考一下 jQuery实现页面搜索，搜索筛选用户输入的内容！ HTML: JQ: 更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总 进行学习 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍easyUI实现类似搜索框关键词自动提示功能示例代码，包括了easyUI实现类似搜索框关键词自动提示功能示例代码的使用技巧和注意事项，需要的朋友参考一下 在一个DataGrid里面，搜索行所在位置 实现的效果如下： 在搜索框中输入部分列名关键字，即可匹配到行的位置。 EasyUI的SearchBox组件只提供了静态搜索框，我们可以使用ComboBox来实现动态的自动关键匹配效果，并且
-
本文向大家介绍JavaScript实现的搜索及高亮显示功能示例，包括了JavaScript实现的搜索及高亮显示功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现的搜索及高亮显示功能。分享给大家供大家参考，具体如下： 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮,
-
本文向大家介绍自动完成的搜索框javascript实现，包括了自动完成的搜索框javascript实现的使用技巧和注意事项，需要的朋友参考一下 在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局.