html静态jquery搜索,jquery实现网页查找功能示例分享

本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jQuery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息(本例中附加信息为车站开始售票时间)。

HTML

页面需要放置一个输入框用来输入要查找的关键字，以及一个查找按钮，然后就是主体内容#content，里面包含着n个

，即每个时间段开售车票的车站名。

8：00 起售车站

安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、

齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。

....此处省略n个p

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, ''+searchText+'');

$(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 = '

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

}

});