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

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