本文主要为大家分享一篇实例详解js如何实现模糊查询的解决办法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。
1、简述
实现模糊查询方法有很多种，后端可以实现，前端使用js也可以实现。
后端实现起来需要根据输入框中搜索的关键字，去后台拼接sql语句查询。
前端直接使用字符串的indexof（）方法或者正则表达式匹配实现，相比后端实现这种方法的用户体验更友好。
2、demo
当输入框中输入内容或者点击查询按钮时，
根据输入框中的关键字，模糊查询下面表格的内容，并重新渲染表格。
代码如下。
（1）javascript代码:
let listdata = ["上海市","黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区",
"闸北区","杨浦区","虹口区","闵行区","宝山区","嘉定区","浦东新区",
"金山区","松江区","青浦区","南汇区","奉贤区","崇明县" ];
function fuzzysearch(listdata){
this.listdata = listdata,//请求得到的数据
this.searchkey = document.getelementbyid('searchkey'),//查询关键字
this.searchbtn = document.getelementbyid('searchbtn'),//查询按钮
this.searchshow = document.getelementbyid('searchshow')//显示查询结果的表格
this.rendertab(this.listdata);
this.init();
}
fuzzysearch.prototype={
init :function(){
let _this = this;
//键入触发事件
_this.searchkey.onkeyup=function(){
let searchresult = _this.searchfn();
_this.rendertab(searchresult);
};
//点击查询按钮触发事件
_this.searchbtn.onclick=function(){
let searchresult = _this.searchfn();
_this.rendertab(searchresult);
};
},
searchfn:function(){
var keyword = this.searchkey.value;
var len = this.listdata.length;
var arr = [];
var reg = new regexp(keyword);
for(var i=0;i<len;i++){
//如果字符串中不包含目标字符会返回-1
if(this.listdata[i].match(reg)){
arr.push(listdata[i]);
}
}
return arr;
}
,rendertab:function(list){
let colstr = '';
if(list.length==0){
this.searchshow.innerhtml='未查询到关键字相关结果';
return;
}
for(var i=0,len=list.length;i<len;i++){
colstr+="<tr><td>"+list[i]+"</td></tr>";
}
this.searchshow.innerhtml = colstr;
}
}
new fuzzysearch(listdata);
3、源码下载
https://github.com/lemonyu/fuzzysearch#fuzzysearch
相关推荐：
如何实现模糊查询结果
js前端实现模糊查询
jquery实现的模糊查询
以上就是实例详解js如何实现模糊查询的详细内容。