jquery实现网页查找功能示例分享

本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jquery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息（本例中附加信息为车站开始售票时间）。

html

页面需要放置一个输入框用来输入要查找的关键字，以及一个查找按钮，然后就是主体内容#content，里面包含着n个<p>，即每个时间段开售车票的车站名。
 

。 代码如下:

<p id="search_box">
    <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />　
    <input class="sbttn" id="search_btn" type="button" value="页内查找" />
</p>
<p id="content">
    <p><strong>8：00 起售车站</strong><br />
　　安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、
齐齐哈尔、青田、日照、山海关、汕头、*、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p>
    ....此处省略n个p
</p>

 

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

首先，我们要实现一个固定p的效果，就是当页面往下拉滚动时，用于查找的输入框和按钮始终固定在页面的最顶部，方便继续查找。

 

。 代码如下:

(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 = '<p class="tipsclass"></p>'; 
    $( 'body' ).append( tipsdiv );
    function showtips( tips, height, time,left ){ 
        var windowwidth = document.documentelement.clientwidth; 
        $('.tipsclass').text(tips);
        $( 'p.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(){$( 'p.tipsclass' ).fadeout();}, ( time * 1000 ) ); 
    } 
});