js實作模糊查詢實例詳解

本文主要和大家分享jjs實作模糊查詢實例詳解，主要以程式碼的方式和大家分享，希望能幫助大家。

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 = &#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);

相關推薦：

實例詳解js如何實作模糊查詢

以上是js實作模糊查詢實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！