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

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

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

(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);

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

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

$(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;
            }
        }
    }
      ...
});

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

$(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 ) ); 
    } 
});