HTML 페이지에서 검색 기능을 만드는 방법

이번에는 html 페이지에서 검색 기능을 만드는 방법을 보여드리겠습니다. HTML 페이지에서 검색 기능을 구현할 때 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

최근에 많은 사람들이 수정한 프레임워크를 작업하고 있는데, 매일 코드를 볼 때마다 어지러움을 느끼지만, 프론트엔드를 볼 수 있도록 구성할 수 있는 백엔드를 만들었다는 느낌이 듭니다. 두 라이브러리의 서로 다른 데이터 범위에 대해 꽤 만족스러워서 그날 공유하려고 꺼내봤습니다. 오늘은 제가 며칠 동안 작업한 기능인 검색 기능에 대해 이야기하겠습니다. HTML 페이지의.

이 기능은 주로 검색창에 문자를 입력하는 방식으로 구현되며, 이전 및 다음 버튼을 누르면 검색어 영역에 일치하는 문자가 자동으로 특수 스타일로 표시되며, 이후 계속해서 이전 및 다음 버튼 일치하는 문자를 순서대로 찾아보고 다른 패턴을 사용하여 현재 일치하는 문자를 다른 일치 문자와 구별합니다.

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

다음으로 구현 원칙을 기억하세요.

먼저 마지막 쿼리 결과를 지운 다음 정규식을 사용하여 A 스팬과 같이 키 값을 기반으로 해당 영역에서 일치하는 모든 문자에 특수 스타일을 추가합니다. 클래스 이름이 result인 태그가 메소드에 추가되고 odKey0 변수는 키의 값을 기록하는 데 사용됩니다. (다음 입력 시 먼저 비교하십시오. 동일하면 다음 또는 이전 내용 입력 시 정규식을 사용할 필요가 없습니다.

그런 다음 getNext 메소드를 입력합니다. flg는 사용자가 이전 버튼을 눌렀는지 아니면 다음 버튼을 눌렀는지 나타냅니다. index0을 ​​사용하여 현재 표시된 일치 문자를 기록하여 증가 또는 감소할지 또는 0으로 설정할지 결정합니다. oldCount0보다 크거나 0보다 작으면 다시 시작됩니다.

focusMove 메서드는 페이지를 현재 요소에 배치하는 작업입니다.

Jquery 방법 학습:

eq() 선택기: 선택기는 지정된 인덱스 값을 가진 요소를 선택합니다. 예: $(".contrast .result:eq(1)")는 클래스 이름 대조 요소 중에서 클래스 이름이 result인 두 번째 요소를 선택합니다.

parents() 메서드: 요소의 모든 상위 요소입니다. $("p").parents('.contrast-wrap'), p 요소의 대조 랩이라는 이름의 모든 요소.

replace() 메서드: 선택한 요소를 지정된 HTML 콘텐츠로 교체합니다. 선택한 요소의 요소도 교체됩니다.

offset() 메서드: 문서를 기준으로 일치하는 요소의 오프셋(위치)을 반환하거나 설정합니다.

scrollTop() 메서드: 일치하는 요소의 스크롤 막대의 수직 위치를 반환하거나 설정합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5에서 사진 공백을 해결하는 방법

H5에서 달력 확인 기능 만드는 방법

H5에서 카메라를 호출하여 사진을 찍고 사진을 압축하는 방법

위 내용은 HTML 페이지에서 검색 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!