摘要：
后端实现需要根据输入框中搜索的关键字在后台拼接SQL语句查询。前端直接使用字符串或正则表达式匹配的indexOf（）方法，这比该方法的后端实现更方便用户。
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);
（2）html代码：
<div class="wrap">
<input type='text' value="" />
<input type='button' value="查询" />
<table id='searchShow'></table>
</div>（3）css代码：
.wrap{50%;margin:0 auto;}
#searchShow{font-size:12px;border:1px solid #ccc; border-collapse: collapse;margin-top:20px;}
#searchShow td{border:1px solid #ccc;padding:4px 5px;}
#searchShow tr:nth-child(even) {
background: hsl(180, 35%, 58%);
color: #fff;
}
#searchShow tr:nth-child(odd) {
background: White;
} 3、运行效果
4、源码下载
https://github.com/lemonYU/fuzzySearch#fuzzysearch
如果对您有帮助的话，记得帮我star哦（笔芯ღ( ´･ᴗ･` )）