jquery实现网页查找功能
Jun 28, 2018 pm 03:19 PM这篇文章主要介绍了关于jquery实现网页查找功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息
本文以查找车站名为例,仿12306官网查找车站售票时间页面效果,当用户输入关键字点击查找按钮或按回车键时,jQuery通过正则匹配内容,准确匹配关键字,并迅速将页面定位滚动到第一个匹配的位置,并显示相关信息(本例中附加信息为车站开始售票时间)。
HTML
页面需要放置一个输入框用来输入要查找的关键字,以及一个查找按钮,然后就是主体内容#content,里面包含着n个<p>,即每个时间段开售车票的车站名。
<p id="search_box"> <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" /> <input class="sbttn" id="search_btn" type="button" value="页内查找" /> </p> <p id="content"> <p><strong>8:00 起售车站</strong><br /> 安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、 齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p> ....此处省略n个p </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
首先,我们要实现一个固定p的效果,就是当页面往下拉滚动时,用于查找的输入框和按钮始终固定在页面的最顶部,方便继续查找。
(function($) { $.fn.fixp = 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);
接着,我们调用fixp()。
$(function(){ $("#search_box").fixp({ 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 tipsp = '<p class="tipsClass"></p>'; $( 'body' ).append( tipsp ); function showTips( tips, height, time,left ){ var windowWidth = document.documentElement.clientWidth; $('.tipsClass').text(tips); $( 'p.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(){$( 'p.tipsClass' ).fadeOut();}, ( time * 1000 ) ); } });
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
如何解决jQuery mobile的header和footer在点击屏幕的时候消失的问题
Atas ialah kandungan terperinci jquery实现网页查找功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk menghantar halaman web ke desktop sebagai pintasan dalam pelayar Edge?

Mengapa halaman web tidak boleh dibuka?

Membangunkan sistem pengundian web menggunakan JavaScript

Kemungkinan sebab sambungan rangkaian adalah normal tetapi penyemak imbas tidak boleh mengakses halaman web

Apa yang perlu dilakukan jika halaman web tidak boleh diakses

Bagaimana untuk menyediakan muat semula automatik halaman web

Apakah yang perlu saya lakukan jika imej pada halaman web tidak boleh dimuatkan? 6 penyelesaian

Perkara yang perlu dilakukan jika halaman web tidak boleh dibuka
