Explication détaillée des étapes pour implémenter une requête floue avec jQuery

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter une requête floue avec jQuery Quelles sont les précautions pour implémenter une requête floue avec jQuery Ce qui suit est un exemple pratique. cas, jetons un coup d'oeil.

Exigences : La liste contient beaucoup de contenu. L'utilisateur doit trouver certains éléments dans la liste. Seuls les éléments qui correspondent à la valeur saisie par l'utilisateur sont affichés. (Il n'y a pas de pagination en arrière-plan, et l'interface asynchrone directe renvoie la liste de contenu formée par l'ajout de données)

Bien qu'il puisse être interrogé en passant des paramètres puis en appelant, l'enregistrement principal voici le traitement frontal pour les requêtes floues. Il n'est pas nécessaire d'appeler à nouveau la méthode d'implémentation de l'interface.

partie html :

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

partie js :

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 : Ce qui précède réalise la fonction de requête floue du front-end js, haha. Il y a une entrée supplémentaire dans l'événement d'écoute dans le code. Il est dit compatible avec iOS. Je ne l'ai pas testé spécifiquement. Si quelqu'un l'a testé, pouvez-vous me le dire.

Un autre problème est qu'avec la méthode d'implémentation ci-dessus, lorsque le contenu de la liste est composé de milliers ou plus, il y aura des décalages lors de la saisie du formulaire car un grand nombre de structures DOM doivent être manipulées via js (Masquer ou afficher) , la situation n'est peut-être pas si grave sur PC. Lors des tests sur téléphone portable, c'est vraiment "bloqué". Si un maître a une meilleure méthode, j'espère l'améliorer !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'adaptation de la position inférieure du composant de pied de page public dans le projet vue

Cas classique Js analyse de code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!