jquery實現網頁查找功能示例分享

 當需要在頁面中查找某個關鍵字時，一是可以通過浏覽器的查找功能實現，二是可以通過前端腳本准確查找定位，本文介紹通過jQuery實現的頁面內容查找定位的功能，並可擴展顯示查找後的相關信息

本文以查找車站名為例，仿12306官網查找車站售票時間頁面效果，當用戶輸入關鍵字點擊查找按鈕或按回車鍵時，jQuery通過正則匹配內容，准確匹配關鍵字，並迅速將頁面定位滾動到第一個匹配的位置，並顯示相關信息（本例中附加信息為車站開始售票時間）。   HTML   頁面需要放置一個輸入框用來輸入要查找的關鍵字，以及一個查找按鈕，然後就是主體內容#content，裡面包含著n個<p>，即每個時間段開售車票的車站名。   代碼如下: <div id="search_box">      <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />　      <input class="sbttn" id="search_btn" type="button" value="頁內查找" />  </div>  <div id="content">      <p><strong>8：00 起售車站</strong><br />  　　安陽、白城、北京西、成都東、大慶、大慶西、東莞、東莞東、惠州、金華南、缙雲、九江、蘭州、麗水、臨汾、南充、  齊齊哈爾、青田、日照、山海關、汕頭、松原、溫州、烏蘭浩特、烏魯木齊、武昌、武義、西安、永康、運城。</p>      ....此處省略n個p  </div>      CSS   簡單的對頁面內容進行CSS設置，其中.highlight和#tip分別用來設置查找結果高亮顯示和信息提示框顯示的樣式效果，後面我們會介紹到。    代碼如下: #search_box { background: white; opacity: 0.8; text-align:right }  #search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px;   width: 100px; line-height: 24px; color: white; }  #searchstr { font-size: 14px; height: 20px; }  .highlight { background: yellow; color: red; }  #tip { background: #ffc; border: 1px solid #999; width: 110px; text-align: center;   display: none; font-size: 12px; }      jQuery   首先，我們要實現一個固定div的效果，就是當頁面往下拉滾動時，用於查找的輸入框和按鈕始終固定在頁面的最頂部，方便繼續查找。    代碼如下: (function($) {      $.fn.fixDiv = function(options) {          var defaultVal = {              top: 10          };          var obj = $.extend(defaultVal, options);          $this = this;          var _top = $this.offset().top;          var _left = $this.offset().left;          $(window).scroll(function() {              var _currentTop = $this.offset().top;              var _scrollTop = $(document).scrollTop();              if (_scrollTop > _top) {                  $this.offset({                      top: _scrollTop + obj.top,                      left: _left                  });              } else {                  $this.offset({                      top: _top,                      left: _left                  });              }          });          return $this;      };  })(jQuery);      接著，我們調用fixDiv()。     代碼如下: $(function(){      $("#search_box").fixDiv({ top: 0 });  });      接下來，最關鍵的實現查找功能。當輸入關鍵字後，點擊查找按鈕或按回車鍵，調用查找函數highlight()。     代碼如下: $(function(){      ...      $('#search_btn').click(highlight);//點擊search時，執行highlight函數；      $('#searchstr').keydown(function (e) {          var key = e.which;          if (key == 13) highlight();      })      ...  });      在函數highlight()需要做很多事情，1.清空上次高亮顯示內容，2.隱藏並清空提示信息，3.判斷輸入內容為空的情況，4.獲取輸入的關鍵字，並與頁面內容進行正則匹配，並用flag標記查找到結果，將查找結果高亮顯示，5.根據查找結果的數量，確定提示信息的內容和位置偏移量，准確定位並顯示提示信息。請看具體代碼：   代碼如下: $(function(){      ...      var i = 0;      var sCurText;      function highlight(){          clearSelection();//先清空一下上次高亮顯示的內容；            var flag = 0;          var bStart = true;            $('#tip').text('');          $('#tip').hide();          var searchText = $('#searchstr').val();          var _searchTop = $('#searchstr').offset().top+30;          var _searchLeft = $('#searchstr').offset().left;          if($.trim(searchText)==""){              showTips("請輸入查找車站名",_searchTop,3,_searchLeft);              return;          }          //查找匹配          var searchText = $('#searchstr').val();//獲取你輸入的關鍵字；          var regExp = new RegExp(searchText, 'g');//創建正則表達式，g表示全局的，如果不用g，                    //則查找到第一個就不會繼續向下查找了；          var content = $("#content").text();          if (!regExp.test(content)) {              showTips("沒有找到要查找的車站",_searchTop,3,_searchLeft);              return;          } else {              if (sCurText != searchText) {                  i = 0;                  sCurText = searchText;               }          }          //高亮顯示          $('p').each(function(){              var html = $(this).html();              //將找到的關鍵字替換，加上highlight屬性；              var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');              $(this).html(newHtml);//更新；              flag = 1;          });            //定位並提示信息          if (flag == 1) {              if ($(".highlight").size() > 1) {                  var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height();          &nb