Detailliertes Beispiel für die Implementierung einer Fuzzy-Abfrage in js

Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel, um detailliert zu erklären, wie Fuzzy-Abfragelösungen in js implementiert werden. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

1. Kurzbeschreibung

Es gibt viele Möglichkeiten, Fuzzy-Abfragen zu implementieren, die im Back-End implementiert werden können und auch mit js im Front-End implementiert werden können .

Die Backend-Implementierung erfordert das Zusammenführen von SQL-Anweisungsabfragen im Hintergrund basierend auf den im Eingabefeld gesuchten Schlüsselwörtern.

Das Front-End verwendet direkt die indexOf()-Methode der String- oder regulären Ausdrucks-Matching-Implementierung, was eine benutzerfreundlichere Erfahrung bietet als die Back-End-Implementierung dieser Methode.

2. Demo

Wenn Sie Inhalte in das Eingabefeld eingeben oder auf die Abfrageschaltfläche klicken,
fragen Sie den Inhalt der folgenden Tabelle anhand der Schlüsselwörter in der Eingabe unscharf ab Box und rendern Sie die Tabelle erneut.
Der Code lautet wie folgt.

(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. Quellcode-Download

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

Verwandte Empfehlungen:

So erzielen Sie unscharfe Abfrageergebnisse

js-Front-End-Implementierung von Fuzzy-Abfragen

jQuery-Implementierung von Fuzzy-Abfragen

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Implementierung einer Fuzzy-Abfrage in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!