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);
相关推荐：
实例详解js如何实现模糊查询
以上就是js实现模糊查询实例详解的详细内容。