jquery implements web page search function

This article mainly introduces the jquery implementation of the web page search function, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

When you need to find a keyword on the page Firstly, it can be realized through the search function of the browser, and secondly, it can be accurately searched and positioned through the front-end script. This article introduces the function of searching and positioning the page content through jQuery, and can expand the display of relevant information after searching

This article takes the search for the station name as an example, imitating the effect of the 12306 official website to find the station ticket time page. When the user enters a keyword and clicks the search button or presses the Enter key, jQuery matches the content through regular rules, accurately matches the keyword, and quickly positions the page Scroll to the first matching position and display relevant information (in this example, the additional information is the station's ticket start time).

HTML

The page needs to place an input box to enter the keywords to be searched, and a search button, and then the main content #content, which contains n

, that is, the name of the station that sells tickets in each time period.

<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

Simple CSS settings for page content, where .highlight and #tip are used to set search result highlighting and information tips respectively. We will introduce the style effect of box display later.

#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

First of all, we need to achieve a fixed p effect, that is, when the page is pulled down and scrolled, the input box and button used for search are always fixed at at the very top of the page for easy search.

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

Next, we call fixp().

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

Next, the most critical thing is to implement the search function. After entering the keyword, click the search button or press the Enter key to call the search function highlight().

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

There are many things that need to be done in the function highlight(), 1. Clear the last highlighted content, 2. Hide and clear the prompt information, 3. Determine if the input content is empty, 4. Get the input Keywords, and regular matching with the page content, and use the flag mark to find the results, and highlight the search results. 5. According to the number of search results, determine the content and position offset of the prompt information, accurately locate and display the prompt information . Please see the specific code:

$(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, &#39;<span class="highlight">&#39;+searchText+&#39;</span>&#39;); 
            $(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; 
                $(&#39;#tip&#39;).show(); 
                $("#tip").html(_tip).offset({ top: _top, left: _left }); 
            } 
            $("html, body").animate({ scrollTop: _top - 50 }); 
            i++; 
            if (i > $(".highlight").size() - 1) { 
                i = 0; 
            } 
        } 
    } 
      ... 
});

The clearSelection() function mentioned in the above code is used to clear the highlight effect. The code is as follows:

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

Finally add the showTips() function, which uses To display the search result prompt information after entering the search keyword.

$(function(){ 
    var tipsp = &#39;<p class="tipsClass"></p>&#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 ) );  
    }  
});

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of jQuery mobile’s header and footer disappearing when the screen is clicked

JQuery The effect plug-in for automatic carousel of pictures and texts

The above is the detailed content of jquery implements web page search function. For more information, please follow other related articles on the PHP Chinese website!