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

轉載：http://www.helloweba.com/view-blog-246.html

演示代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="頁內查找,jquery" />
<meta name="description" content="Helloweba演示平臺，演示HTML、CSS、jquery、PHP實例" />
<title>演示：jQuery實現頁內查找相關內容</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css"> .demo{width:800px; margin:40px auto 0 auto; min-height:250px; font-size:14px} .demo p{line-height:22px} .demo p strong{color:#f30} .highlight { background: yellow; color: red; } .prelight { background: blue; color: white; } #tip { background: #FFFFCC; border: 1px solid #999; width: 200px; text-align: center; display: none; font-size: 12px; } #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; }
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript"> (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); $(function(){ $("#search_box").fixDiv({ top: 0 }); $('#search_btn').click(highlight);//點擊search時，執行highlight函數；
 $('#searchstr').keydown(function (e) { var key = e.which; if (key == 13) highlight(); }) 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)=="" || $.trim(searchText)=='.'){ //alert(123);
 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(); var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');//將找到的關鍵字替換，加上highlight屬性；
 $(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; } } } function clearSelection(){ $('p').each(function(){ //找到全部highlight屬性的元素；
 $(this).find('.highlight').each(function(){ $(this).replaceWith($(this).html());//將他們的屬性去掉；
 }); }); } //mask
    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 ) ); } }) /**/
</script>
</head>

<body>
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首頁">helloweba</a></h1></div>
   <div class="demo_topad"><script src="/js/ad_js/demo_topad.js" type="text/javascript"></script></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-246.html">jQuery實現頁內查找相關內容</a></h2>
   <div class="demo">
     <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>
<p>　　<strong>9：00 起售車站</strong><br /> 　　阿克蘇、寶雞、北京北、茶陵、長興南、成都、大同、德清西、海寧、濟寧、加格達奇、嘉興、庫爾勒、奎屯、昆明、拉薩、漠河、那曲、訥河、寧波、萍鄉、上虞、紹興、瀋陽北、宜昌、宜昌東、宜春、餘姚、湛江、鄭州。</p>
<p>　　<strong>9：30 起售車站</strong><br /> 　　深圳。</p>
<p>　　<strong>10：00 起售車站</strong><br /> 　　阿拉山口、北京、北屯市、貴陽、哈密、哈密南、和田、霍爾果斯、喀什、柳園、南昌、南昌西、青島、青島北、瀋陽、伊寧。</p>
<p>　　<strong>10：30 起售車站</strong><br /> 　　深圳東、深圳西。</p>
<p>　　<strong>11：00/14：00起售車站（C、D字頭列車11：00，G字頭列車14：00）</strong><br /> 　　安亭北、安陽東、鞍山西、鰲江、鮁魚圈、蚌埠南、寶華山、寶雞南、保定東、北滘、北京南、碧江、濱海、濱海北、博鰲、滄州西、蒼南、昌圖西、長春西、長沙南、長興、常州北、潮汕、潮陽、郴州西、赤壁北、滁州、丹徒、丹陽北、德惠西、德清、德州東、定遠、定州東、東昇、都江堰、防城港北、肥東、奉化、扶余北、福安、福鼎、福清、福州南、蓋州西、高碑店東、高邑西、公主嶺南、鞏義南、古鎮、光明城、廣州南、哈爾濱西、海城西、海口東、海寧西、邯鄲東、涵江、漢川、合肥北城、賀勝橋東、鶴壁東、橫溝橋東、衡山西、衡陽東、紅安西、紅光鎮、鮜門、湖州、虎門、花橋、華山北、淮南東、惠東、惠山、惠州南、濟南西、嘉善南、嘉興南、江門、江寧、角美、金山北、金寨、晉江、句容西、軍糧城北、開原西、葵潭、崑山南、廊坊、樂清、耒陽西、離堆公園、溧水、溧陽、連江、臨海、靈寶西、陵水、龍嘉、龍山鎮、陸豐、灤河、羅源、洛陽龍門、漯河西、美蘭、汨羅東、廟山、明港東、明珠、南湖東、南京南、南靖、南朗、南頭、南翔北、寧德、寧海、彭州、郫縣西、莆田、普安、普寧、普灣、慼墅堰、岐山、前山、青城山、清遠、慶盛、瓊海、曲阜東、泉州、饒平、容桂、瑞安、三門峽南、三門縣、山坡東、汕尾、上海虹橋、上海西、上虞北、韶關、紹興北、紳坊、深圳北、深圳坪山、澠池南、石龍、雙城北、順德、順德學院、四平東、松江南、蘇州北、蘇州新區、蘇州園區、宿州東、台州、太姥山、泰安、湯遜湖、唐家灣、滕州東、天津南、鐵嶺西、桐鄉、土地堂東、瓦房店西、瓦屋山、萬寧、渭南北、溫嶺、溫州南、文昌、烏龍泉南、無錫東、無錫新區、武清、西安北、犀浦、霞浦、廈門北、仙林、咸寧北、咸寧東、咸寧南、咸陽秦都、小欖、孝感北、新會、新鄉東、信陽東、邢臺東、徐州東、許昌東、亞龍灣、雁蕩山、陽澄湖、楊陵南、宜興、英德西、迎賓路、營口東、永嘉、餘杭、餘姚北、岳陽東、雲霄、棗莊、漳浦、樟木頭、詔安、鎮江南、正定機場、鄭州東、枝江北、紙坊東、中山、中山北、株洲西、珠海、珠海北、駐馬店西、莊橋、涿州東。</p>
<p>　　<strong>12：00 起售車站</strong><br /> 　　廣州。</p>
<p>　　<strong>12：30 起售車站</strong><br /> 　　阿克陶、阿圖什、巴楚、博樂、佈列開、福海、格爾木、廣元、漢口、和靜、和什託洛蓋、精河、精河南、克拉瑪依、庫車、輪臺、瑪納斯湖、綿陽、墨玉、尼勒克、皮山、沙灣縣、莎車、鄯善、石河子、疏勒、天津、吐魯番、烏西、五5、新和、焉耆、葉城、伊寧東、英吉沙、澤普。</p>
<p>　　<strong>13：00 起售車站</strong><br /> 　　安慶、安慶西、亳州、長春、長治北、巢湖、敦煌、阜南、阜陽、哈爾濱、漢中、合肥、淮南、黃梅、霍邱、濟南、濟南東、嘉峪關、六安、廬江、全椒、三堂集、石家莊、石家莊北、舒城、水家湖、宿松、太湖、太原、天柱山、桐城、烏海西、武漢、廈門、廈門高崎、葉集、重慶北。</p>
<p>　　<strong>13：30 起售車站</strong><br /> 　　阪田、常平、潮州、春灣、大埔、豐順、佛山、高州、廣州北、廣州東、和平、河源、華城、惠州西、揭陽、樂昌、雷州、龍川、茂名東、梅州、坪石、三水、韶關東、新興縣、信宜、興寧、徐聞、陽春、英德、源潭、湛江西、肇慶。</p>
<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>
<div id="tip"></div>
    
 <div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
</div>
</div>

<div id="footer">
    <p>Powered by helloweba.com  容許轉載、修改和使用本站的DEMO，但請註明出處：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
<span id="stat"><script type="text/javascript" src="/js/tongji.js"></script></span>
</body>
</html>