Detaillierte Erläuterung von Beispielen für Fuzzy-Abfragen mit js

In diesem Artikel werden hauptsächlich detaillierte Beispiele für die Implementierung von Fuzzy-Abfragen mit Ihnen geteilt. Ich hoffe, dass er allen helfen kann.

1. Kurzbeschreibung

Es gibt viele Möglichkeiten, Fuzzy-Abfragen zu implementieren, die im Backend implementiert werden können und auch mit js implementiert werden können das vordere Ende.

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,
führen Sie eine Fuzzy-Abfrage anhand der Schlüsselwörter durch Das Eingabefeld zeigt den Inhalt der Tabelle an und rendert die Tabelle neu.
Der Code lautet wie folgt.

(1) Javascript-Code:

let listData = ["Shanghai City", "Huangpu District", "Luwan District", "Xuhui District", "Changning District", „Jing'an-Bezirk“, „Putuo-Bezirk“,
„Zhabei-Bezirk“, „Yangpu-Bezirk“, „Hongkou-Bezirk“, „Minhang-Bezirk“, „Baoshan-Bezirk“, „Jiading-Bezirk“, „Pudong New District“ ,
„Bezirk Jinshan“, „Bezirk Songjiang“, „Bezirk Qingpu“, „Bezirk Nanhui“, „Bezirk Fengxian“, „Bezirk Chongming“ ];

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);

Verwandte Empfehlungen:

Detailliertes Beispiel für die Implementierung von Fuzzy-Abfragen in js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für Fuzzy-Abfragen mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!