jQuery页内查找关键词

收藏

本文介绍通过jQuery插件查找关键字，并高亮显示。当用户输入关键字点击“页内查找”按钮或按回车键时，jQuery通过正则匹配匹配关键字，将页面定位滚动到第一个匹配的位置，并用弹出层显示相关信息。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

我们只需要放置一个关键字输入框和一个查找按钮，主体#content里面包含多个 “p”，即每个时间段站点信息。

<div id="search_box"> 
   <input id="search_input" type="text" size="10" name="search_input" />　 
   <input id="search_button" type="button" value="页内查找" /> 
  </div> 
  <div id="content"> 
   <p>　　<strong>14：30 起售车站</strong><br /> 　　杭州、杭州东、江山、金华西、兰溪、龙游、衢州、义乌、诸暨。</p> 
   <p>　　<strong>15：00 起售车站</strong><br /> 　　滨江、长沙、常德、达州、大理、德州、赣州、广水、哈尔滨东、海湾、邯郸、吉安、吉林、集宁南、嘉善、井冈山、昆山、丽江、芦潮港、麻城、内江、南宁、商丘、上海、上海南、十堰、松江、苏州、威海、无锡、西宁西、香坊、信阳、延安、昭通。</p> 
   <p>　　<strong>16：00起售车站</strong><br /> 　　安康、佳木斯、罗平、威舍、新乡、银川、赤峰、大连、砀山、德令哈、东海县、福州、海石湾、密西西河、呼和浩特、呼和浩特东、黄口、湟源、潢川、乐都、连云港、连云港东、柳州、六盘水、洛阳、牡丹江、邳州、平安驿、平顶山、秦皇岛、唐山、通辽、夏邑县、新沂、徐州、烟台、榆林、虞城县、张家界、重庆、周口、驻马店、遵义。</p> 
   <p>　　<strong>17：00 起售车站</strong><br /> 　　鞍山、常州、丹东、丹阳、抚顺北、阜新、菏泽、红果、晋城、景德镇、南京、盘锦、曲靖、上饶、神木、绥芬河、襄阳、襄阳东、宣威、鹰潭、镇江、中华门、白山市、包头、包头东、承德、东台、恩施、阜宁、桂林、桂林北、海安县、海拉尔、韩城、怀化、淮安、建湖、江都、姜堰、利川、临沂、龙岩、漯河、满洲里、南通、南阳、攀枝花、蕲春、如皋、邵阳、沭阳、泗洪、泗阳、泰州、通化、图们、西昌、延吉、盐城、扬州、洋河、永州、张家口、张家口南、栟茶、如东。</p> 
   <p>　　<strong>18：00 起售车站</strong><br /> </p>
  此处只做三个例子，后面省略......
</div>

jQuery

1、固定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);

2、我们调用fixDiv()，定义位置。

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

3、关键字查找。当输入关键字后，点击“页内查找”按钮或按回车键，调用查找函数highlight()。

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

4、显示相关结果提示信息。

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