php js 搜索模糊匹配,实例详解js如何实现模糊查询

本文主要为大家分享一篇实例详解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.οnkeyup=function(){

let searchResult = _this.searchFn();

_this.renderTab(searchResult);

};

//点击查询按钮触发事件

_this.searchBtn.οnclick=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

//如果字符串中不包含目标字符会返回-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

colStr+="

"+list[i]+"";

}

this.searchShow.innerHTML = colStr;

}

}

new Fuzzysearch(listData);

3、源码下载

相关推荐：