实例详解js如何实现模糊查询

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