html查找框功能
- 墨辰丷原創
- 2018-06-04 14:29:174112瀏覽
html頁面的查找功能主要是實現在查找框內輸入字符，以下透過本文給大家分享html頁面的查找功能，需要的朋友參考下吧
最近在搞一個被很多人改了的框架，天天看程式碼看的頭的暈了，不過感覺進步還挺大的，自己做了一個後台可配置前台查看兩個庫不同數據範圍的東西，還挺滿意，那天拿出來分享一下，今天先說一個這幾天做的功能，就是html頁面的查找功能。
這個功能主要是實現在查找框內輸入字符，之後按後面的上一個下一個按鈕，會自動把查詢區域內的匹配字符用特殊的樣式標記，之後可以繼續按上一個下一個按鈕把按照順序瀏覽匹配字符，並把目前匹配的字符用另一種樣式與其他匹配字符加以區別。
前台顯示大概是這個樣子：
html是這樣：
<p class="container" style="z-index: 999" id="searchp">
<p class="keyword-search">
查找：
<input id="key" type="text" style="width: 200px;" placeholder="关键词" />
<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>
</p>
</p>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>接下來記一下實現原理：
先把上一次的查詢結果清除掉，然後根據key的值，用正規表示式把區域內所有匹配的字元全都加上特殊的樣式，例如方法中就全部加了一個類別名為result的span標籤，用odKey0變數記錄key的值（下次再進入先比較如果一樣的話說明是要看下一個或者上一個的內容，就不用在進入用正規表示式匹配了），oldCount0記錄總共查詢出來的個數，newflag置0（如果不是初次查詢newflag為1）。
接著進入getNext方法，flg表示使用者按下的是上一個還是下一個按鈕，用index0記錄目前查看的是哪一個匹配字符，與oldCount0比較，確定是遞增或遞減還是置0（如果大於oldCount0或小於0，就要重新開始）。
focusMove方法就是讓頁面定位到目前元素的操作。
學到的jquery方法：
#eq() 選擇器：選擇器選取指定 index 值的元素。例如：$(".contrast .result:eq(1)")，就是選擇類別名稱contrast元素中的第二個類別名為result的元素。
parents()方法：元素的所有父元素。 $("p").parents('.contrast-wrap')，p元素所有類別名為contrast-wrap的元素。
replace()方法：用指定的html內容取代被選元素，注意是把被選元素的元素也替換掉。
offset()方法：傳回或設定匹配元素相對於文件的偏移（位置）。
scrollTop()方法：傳回或設定符合元素的捲軸的垂直位置。
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。
相關推薦：
使用HTML5中postMessage知識點解決Ajax中POST跨域問題
Chart.js 輕量級HTML5圖表繪製工具庫使用步驟詳解
以上是html查找框功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！