So erstellen Sie eine Suchfunktion in einer HTML-Seite

Dieses Mal zeige ich Ihnen, wie Sie eine Suchfunktion in einer HTML-Seite erstellen. Was sind die Vorsichtsmaßnahmen bei der Implementierung der Suchfunktion in HTML-Seiten? Hier ist ein praktischer Fall, schauen wir uns ihn gemeinsam an.

Ich habe kürzlich an einem Framework gearbeitet, das von vielen Leuten geändert wurde. Beim Lesen des Codes wird mir jeden Tag schwindelig, aber ich habe das Gefühl, dass ich große Fortschritte gemacht habe Um verschiedene Daten aus den beiden Bibliotheken anzuzeigen, bin ich mit der Bandbreite der Dinge, die ich an diesem Tag herausgenommen habe, sehr zufrieden. Heute werde ich über eine Funktion sprechen, an der ich in den letzten Tagen gearbeitet habe die Suchfunktion von HTML-Seiten.

Diese Funktion wird hauptsächlich durch Eingabe der Zeichen in das Suchfeld und anschließendes Drücken der Zurück- und Weiter-Tasten implementiert. Die übereinstimmenden Zeichen im Abfragebereich werden automatisch mit einem speziellen Stil markiert , und dann können Sie weiterhin auf die Schaltflächen „Zurück“ und „Weiter“ drücken, um übereinstimmende Zeichen der Reihe nach zu durchsuchen und ein anderes Muster verwenden, um die aktuell übereinstimmenden Zeichen von anderen übereinstimmenden Zeichen zu unterscheiden.

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

Denken Sie als Nächstes an das Implementierungsprinzip:

Löschen Sie zuerst die letzten Abfrageergebnisse und verwenden Sie dann regulären Ausdruck, um alle übereinstimmenden Zeichen im Bereich hinzuzufügen Beispielsweise wird der Methode ein span-Tag mit dem Klassennamen result hinzugefügt und die Variable odKey0 wird verwendet, um den Wert des Schlüssels aufzuzeichnen (vergleichen Sie ihn bei der nächsten Eingabe zuerst. Wenn sie gleich sind, Dies bedeutet, dass eine Überprüfung erforderlich ist. Für den nächsten oder vorherigen Inhalt muss kein regulärer Ausdruck verwendet werden. OldCount0 zeichnet die Gesamtzahl der Abfragen auf, und newflag wird auf 0 gesetzt (wenn es nicht die erste Abfrage ist, wird newflag verwendet). ist 1).

Geben Sie dann die getNext-Methode ein, um anzuzeigen, ob der Benutzer die vorherige oder die nächste Schaltfläche gedrückt hat. Vergleichen Sie es mit oldCount0, um festzustellen, ob es erhöht oder verringert wird 0 (Wenn es größer als oldCount0 oder kleiner als 0 ist, wird es erneut gestartet).

Die focusMove-Methode dient dazu, die Seite auf das aktuelle Element zu positionieren.

Erlernte JQuery-Methoden:

eq()-Selektor: Der Selektor wählt Elemente mit dem angegebenen Indexwert aus. Beispiel: $(".contrast .result:eq(1)") wählt unter den Kontrastelementen des Klassennamens das zweite Element aus, dessen Klassenname result ist.

parents()-Methode: alle übergeordneten Elemente des Elements. $("p").parents('.contrast-wrap'), alle Elemente mit dem Namen context-wrap des p-Elements.

replace()-Methode: Ersetzen Sie das ausgewählte Element durch den angegebenen HTML-Inhalt. Beachten Sie, dass auch die Elemente des ausgewählten Elements ersetzt werden.

offset()-Methode: Gibt den Offset (Position) des übereinstimmenden Elements relativ zum Dokument zurück oder legt diesen fest.

scrollTop()-Methode: Gibt die vertikale Position der Bildlaufleiste des passenden Elements zurück oder legt sie fest.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So lösen Sie die Lücken in Bildern in H5

So erstellen Sie eine Kalenderüberprüfungsfunktion in H5

So rufen Sie die Kamera auf, um Bilder aufzunehmen und Bilder in H5 zu komprimieren

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Suchfunktion in einer HTML-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!