本文以查找車站名為例，仿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.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 = '<p class="tipsClass"></p>';
$( 'body' ).append( tipsDiv );
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 ) );
}
});
