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

前端技术 2023/09/04 JavaScript

本文以查找车站名为例，仿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 ) ); 
    } 
});

本文地址：https://www.stayed.cn/item/11544

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案