DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery實現網頁查找功能示例分享
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();
                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 ) ); 
    } 
});

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved