jquery实现网页查找功能-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

jquery实现网页查找功能

Jun 28, 2018 pm 03:19 PM

Cari fungsi laman web

这篇文章主要介绍了关于jquery实现网页查找功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

当需要在页面中查找某个关键字时，一是可以通过浏览器的查找功能实现，二是可以通过前端脚本准确查找定位，本文介绍通过jQuery实现的页面内容查找定位的功能，并可扩展显示查找后的相关信息

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

HTML

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

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

Salin selepas log masuk

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; }

Salin selepas log masuk

jQuery

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

(function($) { 
    $.fn.fixp = 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 &gt; _top) { 
                $this.offset({ 
                    top: _scrollTop + obj.top, 
                    left: _left 
                }); 
            } else { 
                $this.offset({ 
                    top: _top, 
                    left: _left 
                }); 
            } 
        }); 
        return $this; 
    }; 
})(jQuery);

Salin selepas log masuk

接着，我们调用fixp()。

$(function(){ 
    $(&quot;#search_box&quot;).fixp({ top: 0 }); 
});

Salin selepas log masuk

接下来，最关键的实现查找功能。当输入关键字后，点击查找按钮或按回车键，调用查找函数highlight()。

$(function(){ 
    ... 
    $(&#39;#search_btn&#39;).click(highlight);//点击search时，执行highlight函数； 
    $(&#39;#searchstr&#39;).keydown(function (e) { 
        var key = e.which; 
        if (key == 13) highlight(); 
    }) 
    ... 
});

Salin selepas log masuk

在函数highlight()需要做很多事情，1.清空上次高亮显示内容，2.隐藏并清空提示信息，3.判断输入内容为空的情况，4.获取输入的关键字，并与页面内容进行正则匹配，并用flag标记查找到结果，将查找结果高亮显示，5.根据查找结果的数量，确定提示信息的内容和位置偏移量，准确定位并显示提示信息。请看具体代码：

$(function(){ 
    ... 
    var i = 0; 
    var sCurText; 
    function highlight(){ 
        clearSelection();//先清空一下上次高亮显示的内容； 
        var flag = 0; 
        var bStart = true; 
        $(&#39;#tip&#39;).text(&#39;&#39;); 
        $(&#39;#tip&#39;).hide(); 
        var searchText = $(&#39;#searchstr&#39;).val(); 
        var _searchTop = $(&#39;#searchstr&#39;).offset().top+30; 
        var _searchLeft = $(&#39;#searchstr&#39;).offset().left; 
        if($.trim(searchText)==&quot;&quot;){ 
            showTips(&quot;请输入查找车站名&quot;,_searchTop,3,_searchLeft); 
            return; 
        } 
        //查找匹配 
        var searchText = $(&#39;#searchstr&#39;).val();//获取你输入的关键字； 
        var regExp = new RegExp(searchText, &#39;g&#39;);//创建正则表达式，g表示全局的，如果不用g， 
                  //则查找到第一个就不会继续向下查找了； 
        var content = $(&quot;#content&quot;).text(); 
        if (!regExp.test(content)) { 
            showTips(&quot;没有找到要查找的车站&quot;,_searchTop,3,_searchLeft); 
            return; 
        } else { 
            if (sCurText != searchText) { 
                i = 0; 
                sCurText = searchText; 
             } 
        } 
        //高亮显示 
        $(&#39;p&#39;).each(function(){ 
            var html = $(this).html(); 
            //将找到的关键字替换，加上highlight属性； 
            var newHtml = html.replace(regExp, &#39;&lt;span class=&quot;highlight&quot;&gt;&#39;+searchText+&#39;&lt;/span&gt;&#39;); 
            $(this).html(newHtml);//更新； 
            flag = 1; 
        }); 
        //定位并提示信息 
        if (flag == 1) { 
            if ($(&quot;.highlight&quot;).size() &gt; 1) { 
                var _top = $(&quot;.highlight&quot;).eq(i).offset().top+$(&quot;.highlight&quot;).eq(i).height(); 
                var _tip = $(&quot;.highlight&quot;).eq(i).parent().find(&quot;strong&quot;).text(); 
                if(_tip==&quot;&quot;) _tip = $(&quot;.highlight&quot;).eq(i).parent().parent().find(&quot;strong&quot;).text(); 
                var _left = $(&quot;.highlight&quot;).eq(i).offset().left; 
                var _tipWidth = $(&quot;#tip&quot;).width(); 
                if (_left &gt; $(document).width() - _tipWidth) { 
                     _left = _left - _tipWidth; 
                } 
                $(&quot;#tip&quot;).html(_tip).show(); 
                $(&quot;#tip&quot;).offset({ top: _top, left: _left }); 
                $(&quot;#search_btn&quot;).val(&quot;查找下一个&quot;); 
            }else{ 
                var _top = $(&quot;.highlight&quot;).offset().top+$(&quot;.highlight&quot;).height(); 
                var _tip = $(&quot;.highlight&quot;).parent().find(&quot;strong&quot;).text(); 
                var _left = $(&quot;.highlight&quot;).offset().left; 
                $(&#39;#tip&#39;).show(); 
                $(&quot;#tip&quot;).html(_tip).offset({ top: _top, left: _left }); 
            } 
            $(&quot;html, body&quot;).animate({ scrollTop: _top - 50 }); 
            i++; 
            if (i &gt; $(&quot;.highlight&quot;).size() - 1) { 
                i = 0; 
            } 
        } 
    } 
      ... 
});

Salin selepas log masuk

上述代码中提到的clearSelection()函数用来清空高亮效果，代码如下：

function clearSelection(){ 
        $(&#39;p&#39;).each(function(){ 
            //找到所有highlight属性的元素； 
            $(this).find(&#39;.highlight&#39;).each(function(){ 
                $(this).replaceWith($(this).html());//将他们的属性去掉； 
            }); 
        }); 
}

Salin selepas log masuk

最后加上showTips()函数，该函数用来显示在输入查找关键字后的查找结果提示信息。

$(function(){ 
    var tipsp = &#39;&lt;p class=&quot;tipsClass&quot;&gt;&lt;/p&gt;&#39;;  
    $( &#39;body&#39; ).append( tipsp ); 
    function showTips( tips, height, time,left ){  
        var windowWidth = document.documentElement.clientWidth;  
        $(&#39;.tipsClass&#39;).text(tips); 
        $( &#39;p.tipsClass&#39; ).css({  
        &#39;top&#39; : height + &#39;px&#39;,  
        &#39;left&#39; :left + &#39;px&#39;,  
        &#39;position&#39; : &#39;absolute&#39;,  
        &#39;padding&#39; : &#39;8px 6px&#39;,  
        &#39;background&#39;: &#39;#000000&#39;,  
        &#39;font-size&#39; : 14 + &#39;px&#39;,  
        &#39;font-weight&#39;: 900, 
        &#39;margin&#39; : &#39;0 auto&#39;,  
        &#39;text-align&#39;: &#39;center&#39;,  
        &#39;width&#39; : &#39;auto&#39;,  
        &#39;color&#39; : &#39;#fff&#39;,  
        &#39;border-radius&#39;:&#39;2px&#39;,  
        &#39;opacity&#39; : &#39;0.8&#39; , 
        &#39;box-shadow&#39;:&#39;0px 0px 10px #000&#39;, 
        &#39;-moz-box-shadow&#39;:&#39;0px 0px 10px #000&#39;, 
        &#39;-webkit-box-shadow&#39;:&#39;0px 0px 10px #000&#39; 
        }).show();  
        setTimeout( function(){$( &#39;p.tipsClass&#39; ).fadeOut();}, ( time * 1000 ) );  
    }  
});

Salin selepas log masuk

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！