最近在搞一個(gè)被很多人改了的框架，天天看代碼看的頭的暈了，不過(guò)感覺(jué)進(jìn)步還挺大的，自己做了一個(gè)后臺(tái)可配置前臺(tái)查看兩個(gè)庫(kù)不同數(shù)據(jù)范圍的東西，還挺滿意，那天拿出來(lái)分享一下，今天先說(shuō)一個(gè)這幾天做的功能，就是html頁(yè)面的查找功能。
這個(gè)功能主要是實(shí)現(xiàn)在查找框內(nèi)輸入字符，之后按后面的上一個(gè)下一個(gè)按鈕，會(huì)自動(dòng)把查詢區(qū)域內(nèi)的匹配字符用特殊的樣式標(biāo)記，之后可以繼續(xù)按上一個(gè)下一個(gè)按鈕把按照順序?yàn)g覽匹配字符，并把當(dāng)前匹配的字符用另一種樣式與其他匹配字符加以區(qū)別。
前臺(tái)顯示大概是這個(gè)樣子：
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) {//左邊如果沒(méi)走完，走左邊
focusMove(index0);
index0++;
} else if (index0 == oldCount0) {//都走完了
index0 = 0;
focusMove(index0);
index0++;
}
else {
index0 = 0;//沒(méi)確定
focusMove(index0);
index0++;
}
}
} else {
if (oldCount0 != 0) {//如果還有搜索
if (index0 <= oldCount0 && index0 > 0) {//左邊如果沒(méi)走完，走左邊
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);
/
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。