jQuery实现页内查找相关内容

原创文章 作者:月光光 2014年01月24日 21:05helloweba.com 标签:jQuery 

当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过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 ) ); 
	} 
});
声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/246.html

15条评论

  • ????

    jquery要怎么引入,我像引入js一样引入到html中,发现用不了,后来我以为是要引入jquery官网版本,引入后也没用,那些标签名也改成了我自己的,都没有用。。。有谁知道怎么回事吗?

  • 狂飙的蜗牛

    爱jQuery www.aijquery*** 前来@mark

  • 消散了的诗意

    大兄弟,谢谢开源

  • 追随创新

    主体内容#content,里面包含着n个<p>的被搜索内容。可以改成非<p>的内容吗?<p>后面列太多搜索词太乱,想将搜索词放入表格中,搜索表格中的文字。

  • 楠烛

    怎么用不了

  • 楠烛

    为什么我下了用不了

  • 大爱楼主啊!找了很久才找到这个案例,非常不错,正是我想要的功能!

  • 借鉴了楼主的例子去写, 发现了几处bug, 楼主看看.
    输入: . 或 $ 或 | 或 / 或这个几个符号任意组合, 都会出问题~~

  • 如果每个站名都带了锚文本,搜索的时候如果Url中带有关键字,会出现把Url中的结果也搜索出现的情况,如何解决这个问题呢?

  • 博主,我太爱你了。

  • 不错 貌似很牛[给力]

  • 我输入了个 顿“、” ,然后屏幕真好看,多谢 这个非常实用!

  • 这个都被你发现了,谢谢。

  • 好像有Bug,输入“.”时,页面全变"."了,不过功能真不错,认真看!

  • 非常好,谢谢