jQuery-Implementierung der praktischen Fallanalyse von Fuzzy-Abfragen

Dieses Mal werde ich Ihnen eine praktische Fallanalyse der jQuery-Implementierung von Fuzzy-Abfragen vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung von Fuzzy-Abfragen mit jQuery? Werfen wir einen Blick darauf.

Anforderungen: Die Liste enthält viele Inhalte. Der Benutzer muss bestimmte Elemente in der Liste finden. Es werden nur Elemente angezeigt, die mit dem Benutzereingabewert übereinstimmen. (Es gibt kein Paging im Hintergrund, und die direkte asynchrone Schnittstelle gibt die durch Datenaddition gebildete Inhaltsliste zurück.)

Obwohl der Hauptdatensatz durch Übergabe von Parametern und anschließendem Aufruf abgefragt werden kann Hier ist die Front-End-Verarbeitung für Fuzzy-Abfragen. Es ist nicht erforderlich, die Implementierungsmethode der Schnittstelle erneut aufzurufen.

HTML-Teil:

<p class="search-form">
    <input type="text" placeholder="请输入关键词">
    <span class="icon-clear"></span>
</p>
<p class="content">
  <p class="title row no-gutter">
    <p class="col-20">列表一</p>
    <p class="col-20">列表二</p>
    <p class="col-20">列表三</p>
    <p class="col-20">列表四</p>
    <p class="col-20">列表五</p>
  </p>
  <p class="list-content">
    <ul>
      <li>
        <p class="code">00001</p>
        <p class="name">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容4</p>
      </li>
      <li>……</li>
    </ul>
  </p>
</p>

js-Teil:

queryList: function(){
  $(".search-input").on("input propertychange", function() {
    var queryStr = $.trim($(".search-input").val());
    if(queryStr === ''){
      $(".list-content li").show();
    }else{
    // 以下是匹配某些列的内容，如果是匹配全部列的话就把find()和.parent()去掉即可
      $(".list-content li").hide().find(".code, .name").filter(":contains('"+queryStr+"')").parent("li").show();
      //$(".list-content").refresh(); //重新刷新列表把隐藏的dom结构去掉。
    }
  });
}

Analyse: Das Obige wurde erreicht Die Fuzzy-Abfragefunktion von Front-End-JS, haha. Es gibt eine zusätzliche Eingabe im Listening-Ereignis, die angeblich mit iOS kompatibel ist. Wenn jemand es getestet hat, können Sie es mir sagen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der React-Routing-Verwaltung und Verwendung von React Router

So melden Sie sich mit React an -Router-Validierungskontrolle

Das obige ist der detaillierte Inhalt vonjQuery-Implementierung der praktischen Fallanalyse von Fuzzy-Abfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!