Comment créer une fonction de recherche dans une page HTML

Cette fois, je vais vous montrer comment créer une fonction de recherche dans une page html. Comment créer une fonction de recherche dans une page html ? Quelles sont les précautions lors de la mise en œuvre de la fonction de recherche dans les pages HTML Voici un cas pratique, examinons-le ensemble.

J'ai récemment travaillé sur un framework qui a été modifié par de nombreuses personnes. J'ai le vertige en lisant le code tous les jours, mais j'ai l'impression d'avoir fait de grands progrès, j'ai réalisé un backend et un frontend configurable. pour visualiser différentes données des deux bibliothèques. Je suis assez satisfait de l'éventail de choses que je l'ai sorti pour le partager ce jour-là. Aujourd'hui, je vais parler d'une fonction sur laquelle j'ai travaillé ces derniers jours, à savoir. la fonction de recherche des pages html.

Cette fonction est principalement implémentée en saisissant les caractères dans le champ de recherche , puis en appuyant sur les boutons précédent et suivant, les caractères correspondants dans la zone de requête seront automatiquement marqués avec un style spécial , puis vous pouvez continuer à appuyer sur les boutons Précédent et Suivant pour parcourir les caractères correspondants dans l'ordre et utiliser un autre modèle pour distinguer les caractères actuellement correspondants des autres caractères correspondants.

<div class="container" style="z-index: 999" id="searchDiv">
       <div class="keyword-search">
           查找：
           <input id="key" type="text" style="width: 200px;" placeholder="关键词" />
           <a href="javascript:void(0);" class="prev" onclick=&#39;wordSearch(1)&#39;><i class="c-icon"></i></a>
           <a href="javascript:void(0);" class="next" onclick=&#39;wordSearch()&#39;><i class="c-icon"></i></a>
       </div>
   </div>
<script>//搜索功能
      var oldKey0 = "";
      var index0 = -1;var oldCount0 = 0;
      var newflag = 0;
      var currentLength = 0;
      function wordSearch(flg) {
          var key = $("#key").val(); //取key值
          if (!key) {
              return; //key为空则退出
          }
          getArray();
          focusNext(flg);
      }
      function focusNext(flg) {
          if (newflag == 0) {//如果新搜索,index清零
              index0 = 0;
          }
          if (!flg) {
              if (oldCount0 != 0) {//如果还有搜索
                  if (index0 < oldCount0) {//左边如果没走完，走左边
                      focusMove(index0);
                      index0++;
                  } else if (index0 == oldCount0) {//都走完了
                      index0 = 0;
                      focusMove(index0);
                      index0++;
                  }
                  else {
                      index0 = 0;//没确定
                      focusMove(index0);
                      index0++;
                  }
              }
          } else {
              if (oldCount0 != 0) {//如果还有搜索
                  if (index0 <= oldCount0 && index0 > 0) {//左边如果没走完，走左边
                      index0--;
                      focusMove(index0);
                  } else if (index0 == 0) {//都走完了
                      index0 = oldCount0;
                      index0--
                      focusMove(index0);
                  }
              }
          }
      }
      function getArray() {
          newflag = 1;
          $(".contrast .result").removeClass("res");
          var key = $("#key").val(); //取key值
          if (!key) {
              oldKey0 = "";
              return; //key为空则退出
          }
          if (oldKey0 != key || $(".current").length != currentLength) {
              //重置
              index0 = 0;
              var index = 0;
              $(".contrast .result").each(function () {
                  $(this).replaceWith($(this).html());
              });
              pos0 = new Array();
              if ($(".contrast-wrap").hasClass("current")) {
                  currentLength = $(".current").length;
                  $(".current .contrast").each(function () {
                      $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                  });
              } else {
                  $(".contrast-wrap").addClass(&#39;current&#39;);
                  currentLength = $(".current").length;
                  $(".contrast").each(function () {
                      $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                  });
              }
              //$("#key").val(key);
              oldKey0 = key;
              //$(".contrast .result").each(function () {
              //    $(this).parents(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
              //    pos0.push($(this).offset().top);
              //});
              // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
              oldCount0 = $(".contrast .result").length;
              newflag = 0;
          }
      }
      function focusMove(index0) {
          $(".contrast .result:eq(" + index0 + ")").parents(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
          $(".contrast .result:eq(" + index0 + ")").addClass("res");
          var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
          var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
          $(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
          if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
              $("html, body").animate({ scrollTop: top - 200 }, 200);
          } else {
              $("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
          }
      }
      $(&#39;#key&#39;).change(function () {
          if ($(&#39;#key&#39;).val() == "") {
              index0 = 0;
              $(".contrast .result").each(function () {
                  $(this).replaceWith($(this).html());
              });
              oldKey0 = "";
          }
      });
  </script>

Ensuite, n'oubliez pas le principe de mise en œuvre :

Effacez d'abord les derniers résultats de la requête, puis utilisez expression régulière pour tous les caractères correspondants dans la zone sont ajoutés avec un style spécial, par exemple, une balise span avec un nom de classe de résultat est ajoutée à la méthode, et la variable odKey0 est utilisée pour enregistrer la valeur de la clé (comparez-la d'abord lors de la prochaine saisie. Si elles sont identiques, cela signifie qu'il doit être vérifié. Il n'est pas nécessaire d'utiliser une correspondance d'expression régulière pour le contenu suivant ou précédent), oldCount0 enregistre le nombre total de requêtes et newflag est défini sur 0 (s'il ne s'agit pas de la première requête, newflag est 1).

Entrez ensuite la méthode getNext. flg indique si l'utilisateur a appuyé sur le bouton précédent ou suivant. Utilisez index0 pour enregistrer le caractère correspondant actuellement affiché. Comparez-le avec oldCount0 pour déterminer s'il est incrémenté, décrémenté ou défini sur. 0 (S'il est supérieur à oldCount0 ou inférieur à 0, il recommencera).

La méthode focusMove consiste à positionner la page sur l'élément actuel.

Méthodes JQuery apprises :

sélecteur eq() : Le sélecteur sélectionne les éléments avec une valeur d'index spécifiée. Par exemple : $(".contrast .result:eq(1)") sélectionne le deuxième élément dont le nom de classe est result parmi les éléments de contraste de nom de classe.

Méthode parents() : tous les éléments parents de l'élément. $("p").parents('.contrast-wrap'), tous les éléments nommés contrast-wrap de l'élément p.

Méthode replace() : Remplace l'élément sélectionné par le contenu html spécifié. Notez que les éléments de l'élément sélectionné sont également remplacés.

Méthode offset() : renvoie ou définit le décalage (position) de l'élément correspondant par rapport au document.

Méthode scrollTop() : renvoie ou définit la position verticale de la barre de défilement de l'élément correspondant.

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

Lecture connexe :

Comment résoudre les lacunes dans les images dans H5

Comment faire en sorte que la fonction de vérification du calendrier dans H5

Comment appeler l'appareil photo pour prendre des photos et compresser des images en H5

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!