Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der js-Implementierung der Front-End-Fuzzy-Abfrage

Detaillierte Erläuterung der js-Implementierung der Front-End-Fuzzy-Abfrage

小云云
小云云Original
2018-03-15 15:43:172118Durchsuche

Bei Fuzzy-Abfragen werden Schlüsselwörter im Allgemeinen an das Backend übergeben, und das Backend erledigt dies. Aber manchmal können einige leichtgewichtige Listen-Frontends Ajax-Anfragen reduzieren und die Benutzererfahrung bis zu einem gewissen Grad verbessern. Kommen wir ohne weitere Umschweife direkt zum Code.

//字符串方法indexOf
var len = list.length;
var arr = [];
for(var i=0;i<len;i++){
    //如果字符串中不包含目标字符会返回-1
    if(list[i].indexOf(keyWord)>=0){
        arr.push(list[i]);
    }
}
return arr;
//正则表达式
var len = list.length;
var arr = [];
var reg = new RegExp(keyWord);
for(var i=0;i<len;i++){
    //如果字符串中不包含目标字符会返回-1
    if(list[i].match(reg)){
        arr.push(list[i]);
    }
}
return arr;

Zunächst müssen Sie verstehen, was eine Fuzzy-Abfrage ist (wieder Unsinn), nämlich die Auflistung der Schlüsselwörter in der Liste basierend auf den Schlüsselwörtern (von Dies geschieht hier natürlich nur am einfachsten), dh es wird überprüft, ob jedes Element in der Liste ein Schlüsselwort enthält. Abstrakt bedeutet es also, ob eine Zeichenfolge ein bestimmtes Zeichen oder eine bestimmte Zeichenfolge enthält.

Da wir nun eine Idee haben, besteht der nächste Schritt darin, sie zu implementieren. Wenn wir die grundlegenden Datentypen von js lernen, werden wir feststellen, dass es viele Methoden gibt die Methode string.indexOf(''); diese Methode besteht darin, die Position eines bestimmten Zeichens in der Zeichenfolge zu ermitteln. Wenn kein Zielzeichen vorhanden ist, wird -1 zurückgegeben. Mit dieser Methode können wir also prüfen, ob jedes Element in der Liste ein Schlüsselwort enthält. Als nächstes kommt der sehr leistungsstarke RegExp, ein regulärer Ausdruck zum Abgleichen des Zielzeichens einer Zeichenfolge. Wenn er nicht übereinstimmen kann, gibt er natürlich mehrere andere Methoden zurück, die implementiert werden können werden hier nicht aufgeführt.

Verwandte Empfehlungen:

Eingabebasierte dynamische Fuzzy-Abfrage

JS-Front-End-Implementierungscode für Fuzzy-Abfragen

So implementieren Sie Fuzzy-Abfragen in PHP

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der js-Implementierung der Front-End-Fuzzy-Abfrage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn