html頁面中完成查找功能
我要評論最近在搞一個被很多人改了的框架，天天看代碼看的頭的暈了，不過感覺進(jìn)步還挺大的，自己做了一個后臺可配置前臺查看兩個庫不同數(shù)據(jù)范圍的東西，還挺滿意，那天拿出來分享一下，今天先說一個這幾天做的功能，就是html頁面的查找功能。
這個功能主要是實(shí)現(xiàn)在查找框內(nèi)輸入字符，之后按后面的上一個下一個按鈕，會自動把查詢區(qū)域內(nèi)的匹配字符用特殊的樣式標(biāo)記，之后可以繼續(xù)按上一個下一個按鈕把按照順序?yàn)g覽匹配字符，并把當(dāng)前匹配的字符用另一種樣式與其他匹配字符加以區(qū)別。
前臺顯示大概是這個樣子：
html是這樣：
<div class="container" style="z-index: 999" id="searchDiv">
<div class="keyword-search">
查找：
<input id="key" type="text" style="width: 200px;" placeholder="關(guān)鍵詞" />
<a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>
<a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a>
</div>
</div>
script代碼：
<script>//搜索功能
var oldKey0 = "";
var index0 = -1;var oldCount0 = 0;
var newflag = 0;
var currentLength = 0;
function wordSearch(flg) {
var key = $("#key").val(); //取key值
if (!key) {
return; //key為空則退出
}
getArray();
focusNext(flg);
}
function focusNext(flg) {
if (newflag == 0) {//如果新搜索,index清零
index0 = 0;
}
if (!flg) {
if (oldCount0 != 0) {//如果還有搜索
if (index0 < oldCount0) {//左邊如果沒走完，走左邊
focusMove(index0);
index0++;
} else if (index0 == oldCount0) {//都走完了
index0 = 0;
focusMove(index0);
index0++;
}
else {
index0 = 0;//沒確定
focusMove(index0);
index0++;
}
}
} else {
if (oldCount0 != 0) {//如果還有搜索
if (index0 <= oldCount0 && index0 > 0) {//左邊如果沒走完，走左邊
index0--;
focusMove(index0);
} else if (index0 == 0) {//都走完了
index0 = oldCount0;
index0--
focusMove(index0);
}
}
}
}
function getArray() {
newflag = 1;
$(".contrast .result").removeClass("res");
var key = $("#key").val(); //取key值
if (!key) {
oldKey0 = "";
return; //key為空則退出
}
if (oldKey0 != key || $(".current").length != currentLength) {
//重置
index0 = 0;
var index = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
pos0 = new Array();
if ($(".contrast-wrap").hasClass("current")) {
currentLength = $(".current").length;
$(".current .contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換
});
} else {
$(".contrast-wrap").addClass('current');
currentLength = $(".current").length;
$(".contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換
});
}
//$("#key").val(key);
oldKey0 = key;
//$(".contrast .result").each(function () {
// $(this).parents('.contrast-wrap').addClass('current');
// pos0.push($(this).offset().top);
//});
// pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
oldCount0 = $(".contrast .result").length;
newflag = 0;
}
}
function focusMove(index0) {
$(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
$(".contrast .result:eq(" + index0 + ")").addClass("res");
var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
$(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
$("html, body").animate({ scrollTop: top - 200 }, 200);
} else {
$("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
}
}
$('#key').change(function () {
if ($('#key').val() == "") {
index0 = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
oldKey0 = "";
}
});
</script>
接下來記一下實(shí)現(xiàn)原理：
首先先把上一次的查詢結(jié)果清除掉，然后根據(jù)key的值，用正則表達(dá)式把區(qū)域內(nèi)所有匹配的字符全都加上特殊的樣式，比如方法中就全部加了一個類名為result的span標(biāo)簽，用odKey0變量記錄key的值（下次再進(jìn)入先比較如果一樣的話說明是要看下一個或者上一個的內(nèi)容，就不用在進(jìn)入用正則表達(dá)式匹配了），oldCount0記錄總共查詢出來的個數(shù)，newflag置0（如果不是初次查詢newflag為1）。
接著進(jìn)入getNext方法，flg表示用戶按下的是上一個還是下一個按鈕，用index0記錄當(dāng)前查看的是哪一個匹配字符，與oldCount0比較，確定是遞增或遞減還是置0（如果大于oldCount0或者小于0，就要重新開始）。
focusMove方法就是使頁面定位到當(dāng)前元素的操作。
學(xué)到的jquery方法：
eq() 選擇器：選擇器選取帶有指定 index 值的元素。例如：$(".contrast .result:eq(1)")，就是選擇類名contrast元素中的第二個類名為result的元素。
parents()方法：元素的所有父元素。$("p").parents('.contrast-wrap')，p元素所有類名為contrast-wrap的元素。
replace()方法：用指定的html內(nèi)容替換被選元素，注意是把被選元素的元素也替換掉。
offset()方法：返回或設(shè)置匹配元素相對于文檔的偏移（位置）。
scrollTop()方法：返回或設(shè)置匹配元素的滾動條的垂直位置。
總結(jié)
以上所述是小編給大家介紹的html頁面中完成查找功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
HTML img標(biāo)簽和超鏈接標(biāo)簽詳細(xì)介紹
文章介紹了HTML中img標(biāo)簽的使用,包括src屬性（指定圖片路徑）、相對/絕對路徑區(qū)別、alt替代文本、title提示、寬高控制及邊框設(shè)置等，本文主要給大家介紹HTML img標(biāo)簽和超鏈2025-06-20HTML中meta標(biāo)簽的常見使用案例(示例詳解)
HTML meta標(biāo)簽用于提供文檔元數(shù)據(jù),涵蓋字符編碼、SEO優(yōu)化、社交媒體集成、移動設(shè)備適配、瀏覽器控制及安全隱私設(shè)置,優(yōu)化頁面顯示與搜索引擎索引，本文給大家介紹HTML中meta2025-06-20
input 標(biāo)簽主要用于接收用戶的輸入，隨 type 屬性值的不同，變換其具體功能,本文通過實(shí)例圖文并茂的形式給大家介紹HTML input 標(biāo)簽，感興趣的朋友一起看看吧2025-06-20
這篇文章主要介紹了html 滾動條滾動過快會留下邊框線的解決方案,解決方法很簡單，可以將 dialog 單獨(dú)拿出來別放在 transform 的子元素里,需要的朋友可以參考下2025-06-09- 本文將介紹如何使用<img>標(biāo)簽在 HTML 中添加圖片，并展示一些常見的用法和技巧,通過本文的介紹，應(yīng)該掌握了在 HTML 中添加和調(diào)整圖片的基礎(chǔ)知識，感興趣的朋友一起看2025-05-16
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標(biāo)簽及其相關(guān)標(biāo)簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法：通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點(diǎn)，感興2025-02-24
使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例
在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗(yàn)的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨(dú)特的效果，例如文字鏤空效果,本文將帶你一步一步實(shí)現(xiàn)一個簡單的文字鏤空2024-11-17
Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線,這可能不滿足所有設(shè)計需求,如需去除這些默認(rèn)樣式,可以通過CSS來實(shí)現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25- 在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動拖動文本域（textarea）的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測試以確保2024-09-25
