jquery實現(xiàn)網(wǎng)頁查找功能示例分享

更新時間：2014年02月12日 09:36:45 作者：

當需要在頁面中查找某個關(guān)鍵字時，一是可以通過瀏覽器的查找功能實現(xiàn)，二是可以通過前端腳本準確查找定位，本文介紹通過jQuery實現(xiàn)的頁面內(nèi)容查找定位的功能，并可擴展顯示查找后的相關(guān)信息

本文以查找車站名為例，仿12306官網(wǎng)查找車站售票時間頁面效果，當用戶輸入關(guān)鍵字點擊查找按鈕或按回車鍵時，jQuery通過正則匹配內(nèi)容，準確匹配關(guān)鍵字，并迅速將頁面定位滾動到第一個匹配的位置，并顯示相關(guān)信息（本例中附加信息為車站開始售票時間）。

HTML

頁面需要放置一個輸入框用來輸入要查找的關(guān)鍵字，以及一個查找按鈕，然后就是主體內(nèi)容#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="頁內(nèi)查找" /> 
</div> 
<div id="content"> 
    <p><strong>8：00 起售車站</strong><br /> 
　　安陽、白城、北京西、成都東、大慶、大慶西、東莞、東莞東、惠州、金華南、縉云、九江、蘭州、麗水、臨汾、南充、 
齊齊哈爾、青田、日照、山海關(guān)、汕頭、松原、溫州、烏蘭浩特、烏魯木齊、武昌、武義、西安、永康、運城。</p> 
    ....此處省略n個p 
</div> 

CSS

簡單的對頁面內(nèi)容進行CSS設置，其中.highlight和#tip分別用來設置查找結(jié)果高亮顯示和信息提示框顯示的樣式效果，后面我們會介紹到。

復制代碼代碼如下:

#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

首先，我們要實現(xiàn)一個固定div的效果，就是當頁面往下拉滾動時，用于查找的輸入框和按鈕始終固定在頁面的最頂部，方便繼續(xù)查找。

復制代碼代碼如下:

(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); 

接著，我們調(diào)用fixDiv()。

復制代碼代碼如下:

$(function(){ 
    $("#search_box").fixDiv({ top: 0 }); 
}); 

接下來，最關(guān)鍵的實現(xiàn)查找功能。當輸入關(guān)鍵字后，點擊查找按鈕或按回車鍵，調(diào)用查找函數(shù)highlight()。

復制代碼代碼如下:

$(function(){ 
    ... 
    $('#search_btn').click(highlight);//點擊search時，執(zhí)行highlight函數(shù)； 
    $('#searchstr').keydown(function (e) { 
        var key = e.which; 
        if (key == 13) highlight(); 
    }) 
    ... 
}); 

在函數(shù)highlight()需要做很多事情，1.清空上次高亮顯示內(nèi)容，2.隱藏并清空提示信息，3.判斷輸入內(nèi)容為空的情況，4.獲取輸入的關(guān)鍵字，并與頁面內(nèi)容進行正則匹配，并用flag標記查找到結(jié)果，將查找結(jié)果高亮顯示，5.根據(jù)查找結(jié)果的數(shù)量，確定提示信息的內(nèi)容和位置偏移量，準確定位并顯示提示信息。請看具體代碼：

復制代碼代碼如下:

$(function(){ 
    ... 
    var i = 0; 
    var sCurText; 
    function highlight(){ 
        clearSelection();//先清空一下上次高亮顯示的內(nèi)容； 

        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();//獲取你輸入的關(guān)鍵字； 
        var regExp = new RegExp(searchText, 'g');//創(chuàng)建正則表達式，g表示全局的，如果不用g， 
                  //則查找到第一個就不會繼續(xù)向下查找了； 
        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(); 
            //將找到的關(guān)鍵字替換，加上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()函數(shù)用來清空高亮效果，代碼如下：

復制代碼代碼如下:

function clearSelection(){ 
        $('p').each(function(){ 
            //找到所有highlight屬性的元素； 
            $(this).find('.highlight').each(function(){ 
                $(this).replaceWith($(this).html());//將他們的屬性去掉； 
            }); 
        }); 
} 

最后加上showTips()函數(shù)，該函數(shù)用來顯示在輸入查找關(guān)鍵字后的查找結(jié)果提示信息。

復制代碼代碼如下:

$(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 ) );  
    }  
}); 