如何在html頁(yè)面中做出搜索技巧

最近在搞一個(gè)被很多人改了的框架，天天看代碼看的頭的暈了，不過(guò)感覺(jué)進(jìn)步還挺大的，自己做了一個(gè)后臺(tái)可配置前臺(tái)查看兩個(gè)庫(kù)不同數(shù)據(jù)范圍的東西，還挺滿意，那天拿出來(lái)分享一下，今天先說(shuō)一個(gè)這幾天做的功能，就是html頁(yè)面的查找功能。

這個(gè)功能主要是實(shí)現(xiàn)在查找框內(nèi)輸入字符，之后按后面的上一個(gè)下一個(gè)按鈕，會(huì)自動(dòng)把查詢(xún)區(qū)域內(nèi)的匹配字符用特殊的樣式標(biāo)記，之后可以繼續(xù)按上一個(gè)下一個(gè)按鈕把按照順序?yàn)g覽匹配字符，并把當(dāng)前匹配的字符用另一種樣式與其他匹配字符加以區(qū)別。

<div class="container" style="z-index: 999" id="searchDiv">
       <div class="keyword-search">
           查找：
           <input id="key" type="text" style="width: 200px;" placeholder="關(guān)鍵詞" />
           <a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>
           <a href="javascript:void(0);" class="next" onclick='wordSearch()'><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) {//左邊如果沒(méi)走完，走左邊
                      focusMove(index0);
                      index0++;
                  } else if (index0 == oldCount0) {//都走完了
                      index0 = 0;
                      focusMove(index0);
                      index0++;
                  }
                  else {
                      index0 = 0;//沒(méi)確定
                      focusMove(index0);
                      index0++;
                  }
              }
          } else {
              if (oldCount0 != 0) {//如果還有搜索
                  if (index0 <= oldCount0 && index0 > 0) {//左邊如果沒(méi)走完，走左邊
                      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='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換
                  });
              } else {
                  $(".contrast-wrap").addClass('current');
                  currentLength = $(".current").length;
                  $(".contrast").each(function () {
                      $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換
                  });
              }
              //$("#key").val(key);
              oldKey0 = key;
              //$(".contrast .result").each(function () {
              //    $(this).parents('.contrast-wrap').addClass('current');
              //    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('.contrast-wrap').addClass('current');
          $(".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);
          }
      }
      $('#key').change(function () {
          if ($('#key').val() == "") {
              index0 = 0;
              $(".contrast .result").each(function () {
                  $(this).replaceWith($(this).html());
              });
              oldKey0 = "";
          }
      });
  </script>

接下來(lái)記一下實(shí)現(xiàn)原理：

首先先把上一次的查詢(xún)結(jié)果清除掉，然后根據(jù)key的值，用正則表達(dá)式把區(qū)域內(nèi)所有匹配的字符全都加上特殊的樣式，比如方法中就全部加了一個(gè)類(lèi)名為result的span標(biāo)簽，用odKey0變量記錄key的值（下次再進(jìn)入先比較如果一樣的話說(shuō)明是要看下一個(gè)或者上一個(gè)的內(nèi)容，就不用在進(jìn)入用正則表達(dá)式匹配了），oldCount0記錄總共查詢(xún)出來(lái)的個(gè)數(shù)，newflag置0（如果不是初次查詢(xún)newflag為1）。

接著進(jìn)入getNext方法，flg表示用戶按下的是上一個(gè)還是下一個(gè)按鈕，用index0記錄當(dāng)前查看的是哪一個(gè)匹配字符，與oldCount0比較，確定是遞增或遞減還是置0（如果大于oldCount0或者小于0，就要重新開(kāi)始）。

focusMove方法就是使頁(yè)面定位到當(dāng)前元素的操作。

學(xué)到的jquery方法：

eq() 選擇器：選擇器選取帶有指定 index 值的元素。例如：$(".contrast .result:eq(1)")，就是選擇類(lèi)名contrast元素中的第二個(gè)類(lèi)名為result的元素。

parents()方法：元素的所有父元素。$("p").parents('.contrast-wrap')，p元素所有類(lèi)名為contrast-wrap的元素。

replace()方法：用指定的html內(nèi)容替換被選元素，注意是把被選元素的元素也替換掉。

offset()方法：返回或設(shè)置匹配元素相對(duì)于文檔的偏移（位置）。

scrollTop()方法：返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

H5里圖片中有縫隙應(yīng)該如何解決

H5怎樣做出日歷校驗(yàn)功能

H5怎樣調(diào)用相機(jī)拍照并壓縮圖片

以上就是如何在html頁(yè)面中做出查找功能的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！