jquery實作網頁查找功能範例分享_jquery

本文以查找車站名為例，仿12306官網查找車站售票時間頁面效果，當用戶輸入關鍵字點擊查找按鈕或按回車鍵時，jQuery通過正則匹配內容，準確匹配關鍵字，並迅速將頁面定位捲動到第一個符合的位置，並顯示相關資訊（本例中附加資訊為車站開始售票時間）。

HTML

頁需要放置一個輸入框用來輸入要找的關鍵字，以及一個查找按鈕，然後是主體內容#content，裡麵包含著n個

，即每個時段開售車票的車站名。
 

複製程式碼 程式碼如下:

　
   

   

8：00 起售車站

　　安陽、白城、北京西、成都東、大慶、大慶西、東莞、東莞東、惠州、金華南、縉雲、九江、蘭州、麗水、臨終關懷、南充、
齊齊哈爾、青田、日照、山海關、山頭、松原、溫州、烏蘭浩特、烏魯木齊、武昌、武義、西安、永康、運城。

    ....此處省略n個p

CSS

簡單的對頁面內容進行CSS設置，其中.highlight和#tip分別用來設置查找結果高亮顯示和資訊提示框顯示的樣式效果，後面我們會介紹到。

複製程式碼 程式碼如下:

#search_box { background: white; opacity: 0.8; -align:right }

#search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px; 
width: 100px; line-height: 24px; color: whitex;
#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 = 函數(選項) {
            };
        var obj = $.extend(defaultVal, options);
        $this = this;
        var _top = $this.offset().top;
   var _top = $this.offset().top;
    (function() {
            var _currentTop = $this.offset().top;
              if (_scrollTop > _top ) {
                $this .offset({
                    top: _scrollTop obj.top,
                });
            } else {
                上方：_top ，
                       }); 回傳$this; >})(jQuery);



接著，我們呼叫fixDiv()。 🎜>$(function(){
    $("#search_box").fixDiv({ top: 0 });
});



接下來，最關鍵的實作查找功能。
複製程式碼

程式碼如下：

$(function(){

    ...   (highlight);//點擊search時，執行highlight函數；     $('#searchstr').keydown(function (e) {         13) 反白();     })     ... });

在函數highlight()中需要做很多事情，1.清空上次高亮顯示內容，2.清空提示訊息，3.判斷輸入內容為空的情況，4.取得輸入的關鍵字，並隱藏與頁面內容進行正規匹配，並用標誌標記查找到結果，將查找結果高亮顯示，5.根據查找結果的數量，確定提示信息的內容和位置偏移量，準確定位並顯示提示信息。代碼：

複製程式碼

程式碼如下：

$(function(){
    ...
    var i = 0;
    var sCurText;
        var flag = 0;
        var bStart = true;
        $('#tip').hide();
        var searchText = $('#searchstr .); top 30;
        var _searchLeft = $('#searchstr').offset().left;
       查找車站名",_searchTop,3,_searchLeft);
            return;
        } ').val();//取得你輸入的關鍵字；
        var regExp = new RegExp(searchText, 'g');//創建正規表示式，g表示全域的，如果不用g，
    向下查找了；
        var content = $("#content").text();
        if (!regExp.test(content)) {             return;
        } }               i = 0;
               >        }
        //高亮顯示
        $('p').each(function(            //將找到的關鍵字替換，加上highlight屬性；
            var newHtml = html.replace(regExp, '' searchText '');             flag = 1;
        });
            if ($(" .highlight").size() > 1) {
                var _top = $(".highlight").eq(i)。 ();
                var _tip = $(".highlight").eq(i).parent().find("strong")。 ) _tip = $(".highlight").eq(i).parent().parent().find("strong").text();
               .offset().left;
                var _tipWidth = $("#tip").width();                     _left = _left - _tipWidth;
                }
                $("#tip").html(_tip).show();
                $("#tip").offset({ 上方: _top, 左: _left });
                $("#search_btn").val("找出下一個");
            }else{
                var _top = $(".highlight")..
                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 });
            我;
            if (i > $(".highlight        if (i > $(".highlight        if (i > $(".highlight  
            }
        }
    }
     

上述程式碼中提到的clearSelection()函數用於清空高亮效果，程式碼如下：

 

複製程式碼程式碼如下：

).each(function(){

            // 找出所有highlight屬性的元素；
          p(this).find('.light).find('.light).        $(this) . ReplaceWith($(this).html());//將它們的屬性去掉;
            });
        });
}



最後加上showTips()函數，該函數用於顯示在輸入查找關鍵字後的查找結果提示資訊。
 

複製程式碼

程式碼如下：

$(function(){
    var TipsDiv = '

'; 
    $( 'body' ).append( TipsDiviv ) ;     function showTips( Tips, height, time,left ){ 
        var windowWidth = document. entElement. ).css({
        '上' : 高度'px', 
        '左' :左'px', 
 '8px 6px', 
'背景': '#000000', 
        '字型大小' : 14 'px', 
        '         'text -align': 'center', 
        'width' : 'auto', 
        'color' : '#ff',         'box-shadow':'0px 0px 10px #000',
         '-webkit-box -shadow':'0px 0px 10px #000'
        }).show(); 
       ); 
    } 
});