jquery實作網頁查找功能
這篇文章主要介紹了關於jquery實現網頁查找功能，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
當需要在頁面中查找某個關鍵字時，一是可以透過瀏覽器的查找功能實現，二是可以透過前端腳本準確查找定位，本文介紹透過jQuery實現的頁面內容查找定位的功能，並可擴展顯示查找後的相關資訊
本文以查找車站名為例，仿12306官網查找車站售票時間頁面效果，當用戶輸入關鍵字點擊查找按鈕或按回車鍵時，jQuery透過正則匹配內容，準確匹配關鍵字，並迅速將頁面定位捲動到第一個符合的位置，並顯示相關資訊（本例中附加資訊為車站開始售票時間）。
HTML
頁面需要放置一個輸入框用來輸入要找的關鍵字，以及一個尋找按鈕，然後就是主體內容#content，裡麵包含著n個
，即每個時段開售車票的車站名稱。
<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在點擊螢幕的時候消失的問題
#
以上是jquery實作網頁查找功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？
Mar 14, 2024 pm 05:22 PM
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？我們很多用戶為了方便直接打開訪問頁面，想要將經常使用的網頁以快捷方式的形式顯示在桌面，但是不知道應該如何操作，針對這個問題，本期小編就來和廣大用戶們分享解決方法，一起來看看今日軟體教學分享的內容。 Edge瀏覽器將網頁傳送到桌面捷徑方法： 1、開啟軟體，點選頁面中的「...」按鈕。 2、在下拉式選單選項中選擇「應用」中的「將此網站作為應用程式安裝」。 3、最後在彈出的視窗中將其
使用JavaScript開發網頁投票系統
Aug 09, 2023 pm 01:30 PM
使用JavaScript開發網頁投票系統摘要：隨著互聯網的飛速發展，網上投票成為了一種方便快捷的方式，用於收集公眾的意見和做出決策。本文將介紹使用JavaScript開發一個簡單的網頁投票系統，實作了使用者可以選擇選項並提交投票的功能。介紹:網頁投票系統是一個在網頁上顯示多個選項並允許使用者選擇的程式。它可以用於許多場景，例如選舉投票、產品調查、意見收集等。本文
網頁打不開是什麼原因
Jun 26, 2023 am 11:49 AM
網頁打不開的原因有：1、電腦的本地連線被停用；2、撥接上網帳號與密碼輸入不正確；3、路由器故障或路由器設定出現問題；4、由DNS錯誤導致的IE打不開網頁；5.hosts檔案被修改導致的IE打不開網頁；6、IP位址設定錯誤或取得失敗導致IE打不開網頁。
網頁自動刷新設定方法
Oct 26, 2023 am 10:52 AM
設定網頁的自動刷新可以使用HTML的「meta」標籤、JavaScript的「setTimeout」函數、「setInterval」函數或HTTP的」Refresh「頭。詳細介紹：1、使用HTML的「meta」標籤，在HTML文件的「<head>」標籤中，可以使用「meta」標籤來設定網頁的自動刷新；2、JavaScript的「setTimeout」函數等等。
網頁圖片載入不出來怎麼辦？ 6種解決辦法
Mar 15, 2024 am 10:30 AM
有網友發現打開瀏覽器網頁，網頁上的圖片遲遲加載不出來，是怎麼回事？檢查過網路是正常的，那是哪裡出現了問題呢？下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來： 1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢，電腦中開啟的軟體比較多， 而我們造訪的圖片比較大，這就可能因為載入逾時，導致圖片顯示不出來， 可以將比較佔網速的軟體將關掉，可以去任務管理器查看一下。 2、造訪人數過多 網頁顯示不出圖片還有可能是因為我們造訪的網頁，在同時段造訪的
網頁無法存取怎麼辦
Sep 06, 2023 am 09:36 AM
網頁無法存取的解決方案有檢查網路連線、清除瀏覽器快取、檢查網頁位址、嘗試使用其他瀏覽器、檢查伺服器狀態、檢查網域解析、檢查防火牆和安全設定和聯絡網站管理員等。詳細介紹：1、檢查網絡連接，確保網絡連接正常，可以嘗試打開其他網頁或使用其他設備進行訪問，確定是否是網絡連接問題，如果其他網頁可以正常訪問，那麼可能是該網頁的問題；2、清除瀏覽器緩存，瀏覽器快取可能導致網頁無法載入等等。
網路連線正常但瀏覽器無法存取網頁可能原因
Feb 19, 2024 pm 03:45 PM
瀏覽器打不開網頁但是網路正常，可能的原因是多種多樣的。當問題出現時，我們需要逐步排查，才能確定具體的原因並解決問題。首先，確定網頁打不開的現像是侷限於某個特定的瀏覽器或所有瀏覽器都無法開啟網頁。如果只有一個瀏覽器無法開啟網頁，可以嘗試使用其他瀏覽器，如Google瀏覽器、火狐瀏覽器等進行測試。如果其他瀏覽器能夠正常開啟網頁，那麼問題很可能出在該特定瀏覽器上，可能
網頁打不開怎麼解決
Feb 21, 2024 am 10:24 AM
網頁打不開怎麼解決隨著網路的快速發展，人們越來越依賴網路來獲取資訊、進行交流和娛樂。然而，有時我們會遇到網頁打不開的問題，這給我們帶來了很多困擾。本文將為大家介紹一些常見的方法，幫助解決網頁打不開的問題。首先，我們要確定是因為什麼原因導致網頁打不開。可能的原因包括網頁問題、伺服器問題、瀏覽器設定問題等。以下是一些解決方法：檢查網路連線：首先，我們需要
