Detailed example of how js implements fuzzy query

This article mainly shares an example with you to explain in detail how to implement fuzzy query solutions in js. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

1. Brief description

There are many ways to implement fuzzy query. It can be implemented on the back end, and it can also be implemented using js on the front end.

To implement the backend, you need to splice SQL statement queries in the background based on the keywords searched in the input box.

The front-end directly uses the indexOf() method of strings or regular expression matching implementation. Compared with the back-end implementation of this method, the user experience is more friendly.

2, demo

When you enter content in the input box or click the query button,
fuzzy query the content of the table below based on the keywords in the input box, and re- Render the table.
code show as below.

(1)javascript code:

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 = &#39;&#39;;   
            if(list.length==0){
              this.searchShow.innerHTML=&#39;未查询到关键字相关结果&#39;;
              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. Source code download

https://github.com/lemonYU/fuzzySearch# fuzzysearch

Related recommendations:

How to achieve fuzzy query results

js front-end implementation of fuzzy query

jQuery implementation of fuzzy query

The above is the detailed content of Detailed example of how js implements fuzzy query. For more information, please follow other related articles on the PHP Chinese website!