Implémentation jQuery d'une analyse de cas pratique de requête floue

Cette fois, je vais vous présenter une analyse de cas pratique de jQuery implémentant une requête floue. Quelles sont les précautions pour implémenter une requête floue avec jQuery Voici les cas pratiques, prenons. un regard.

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.

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 de la gestion du routage React et de l'utilisation de React Router

Comment se connecter avec React -Contrôle de validation du routeur

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!