大家好，又见面了，我是你们的朋友全栈君。
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
如果对您有帮助的话，记得帮我star哦（ღ( ´･ᴗ･` )）
☞日益努力，而后风生水起。众生皆苦，你也不能认输！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/139221.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
