jquery实现网页查找功能示例分享_Javascript教程-查字典教程网
jquery实现网页查找功能示例分享
jquery实现网页查找功能示例分享
发布时间:2016-12-30 来源:查字典编辑
摘要:本文以查找车站名为例,仿12306官网查找车站售票时间页面效果,当用户输入关键字点击查找按钮或按回车键时,jQuery通过正则匹配内容,准确...

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

HTML

页面需要放置一个输入框用来输入要查找的关键字,以及一个查找按钮,然后就是主体内容#content,里面包含着n个<p>,即每个时间段开售车票的车站名。

复制代码 代码如下:

<div id="search_box">

<input id="searchstr" type="text" size="10" name="searchstr" />

<input 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>'+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></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 ) );

}

});

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类