jquery實現網頁尋找功能樣本分享

來源:互聯網
上載者:User

 當需要在頁面中尋找某個關鍵字時,一是可以通過瀏覽器的尋找功能實現,二是可以通過前端指令碼準確尋找定位,本文介紹通過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');//建立Regex,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();                 var _tip = $(".highlight").eq(i).parent().find("strong").text();                 if(_tip=="") _tip = $(".highlight").eq(i).parent().parent().find("strong").text();                 var _left = $(".highlight").eq(i).offset().left;                 var _tipWidth = $("#tip").width();                 if (_left > $(document).width() - _tipWidth) {                      _left = _left - _tipWidth;                 }                 $("#tip").html(_tip).show();                 $("#tip").offset({ top: _top, left: _left });                 $("#search_btn").val("尋找下一個");             }else{                 var _top = $(".highlight").offset().top+$(".highlight").height();                 var _tip = $(".highlight").parent().find("strong").text();                 var _left = $(".highlight").offset().left;                 $('#tip').show();                 $("#tip").html(_tip).offset({ top: _top, left: _left });             }             $("html, body").animate({ scrollTop: _top - 50 });             i++;             if (i > $(".highlight").size() - 1) {                 i = 0;             }         }     }       ... });   上述代碼中提到的clearSelection()函數用來清空高亮效果,代碼如下:   代碼如下:function clearSelection(){         $('p').each(function(){             //找到所有highlight屬性的元素;             $(this).find('.highlight').each(function(){                 $(this).replaceWith($(this).html());//將他們的屬性去掉;             });         }); }   最後加上showTips()函數,該函數用來顯示在輸入尋找關鍵字後的尋找結果提示資訊。   代碼如下:$(function(){     var tipsDiv = '<div class="tipsClass"></div>';      $( 'body' ).append( tipsDiv );     function showTips( tips, height, time,left ){          var windowWidth = document.documentElement.clientWidth;          $('.tipsClass').text(tips);         $( 'div.tipsClass' ).css({          'top' : height + 'px',          'left' :left + 'px',          'position' : 'absolute',          'padding' : '8px 6px',          'background': '#000000',          'font-size' : 14 + 'px',          'font-weight': 900,         'margin' : '0 auto',          'text-align': 'center',          'width' : 'auto',          'color' : '#fff',          'border-radius':'2px',          'opacity' : '0.8' ,         'box-shadow':'0px 0px 10px #000',         '-moz-box-shadow':'0px 0px 10px #000',         '-webkit-box-shadow':'0px 0px 10px #000'         }).show();          setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );      }  });  
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。