Example sharing of jquery implementation of web page search function_jquery

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 accurately through regular matching, and quickly The page position scrolls to the first matching position and displays relevant information (in this example, the additional information is the station's ticket sales 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 < p>, that is, the name of the station where tickets are sold in each time period.

Copy code The code is as follows:

<div id="search_box">
<input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />
<input class="sbttn" id="search_btn" type= "button" value="Search within page" />
</div>
<div id="content">
  <p><strong> On sale from 8:00 Station</strong><br />
Anyang, Baicheng, Beijing West, Chengdu East, Daqing, Daqing West, Dongguan, Dongguan East, Huizhou, Jinhua South, Jinyun, Jiujiang, Lanzhou, Lishui, Linfen, Nanchong,
Qiqihar, Qingtian, Rizhao, Shanhaiguan, Shantou, Songyuan, Wenzhou, Ulanhot, Urumqi, Wuchang, Wuyi, Xi'an, Yongkang, Yuncheng. </p>
....n ps are omitted here
</div>

CSS

Simple CSS settings for page content. .highlight and #tip are used to set the style effects of search result highlighting and information prompt box display respectively. The following We will introduce it.

Copy code The code is as follows:

#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 the effect of a fixed div, that is, when the page is scrolled down, the input box and button used for search are always fixed at the top of the page, making it easier to continue searching.

Copy code The code is as follows:

(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();//First Clear the last highlighted content;

var flag = 0;
var bStart = true;

$('#tip').text('');
       $('#tip').hide();
       var searchText = $('#searchstr').val(); top 30;
var _searchLeft = $('#searchstr').offset().left;
if($.trim(searchText)==""){
showTips("Please enter the search station name",_searchTop,3,_searchLeft);
                                                              ; Keywords;
var regExp = new RegExp(searchText, 'g');//Create a regular expression, g means global. If g is not used,
var regExp = new RegExp(searchText, 'g'); //The search will not continue after finding the first one. Searched downward;
var content = $("#content").text();
if (!regExp.test(content)) {
showTips("The station you were looking for was not found" ,_searchTop,3,_searchLeft);
                                                                                  sCurText = searchText;
} }
                                                                                                                                             Word replacement, add highlight attribute;
var newHtml = html.replace(regExp, '<span class="highlight">' searchText '</span>');
                                                                                                                                     html(newHtml); //Update;
           flag = 1; $(".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(); 🎜>                 _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 ) ); 
    } 
});