Detaillierte Erläuterung der Schritte zur Implementierung von Fuzzy-Abfragen mit jQuery

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zur Implementierung von Fuzzy-Abfragen mit jQuery geben. Was sind die Vorsichtsmaßnahmen für die Implementierung von Fuzzy-Abfragen mit jQuery? Fall, 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.

Ein weiteres Problem besteht darin, dass es bei der oben genannten Implementierungsmethode zu Verzögerungen bei der Formulareingabe kommt, wenn die Liste Tausende oder mehr Elemente enthält, da eine große Anzahl von DOM-Strukturen über js manipuliert werden muss (Ausblenden oder anzeigen). ) Beim Testen auf dem Mobiltelefon ist die Situation möglicherweise nicht so ernst. Wenn irgendein Meister eine bessere Methode hat, hoffe ich, sie zu verbessern!

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 Schritte zur Anpassung der unteren Position der öffentlichen Fußzeilenkomponente im Vue-Projekt

Js klassischer Fall Code-Analyse

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