Die Suchfunktion der HTML-Seite wird hauptsächlich zur Eingabe von Zeichen in das Suchfeld verwendet. Freunde, die sie benötigen, können darauf verweisen
Vor kurzem habe ich an einem Projekt gearbeitet, das von vielen Leuten geändert wurde. Mir wird jeden Tag schwindlig, wenn ich mir den Code ansehe, aber ich habe das Gefühl, dass ich ein Backend gemacht habe und konfigurierbar bin Frontend, um die unterschiedlichen Datenbereiche der beiden Bibliotheken anzuzeigen. Ich habe es an diesem Tag herausgenommen, um es zu teilen, und zwar über eine Funktion, an der ich in den letzten Tagen gearbeitet habe die Suchfunktion von HTML-Seiten.
Diese Funktion dient hauptsächlich dazu, Zeichen in das Suchfeld einzugeben und dann die Schaltflächen „Zurück“ und „Weiter“ zu drücken. Die übereinstimmenden Zeichen im Abfragebereich werden automatisch mit einem speziellen Stil markiert Die Schaltflächen „Weiter“ und „Weiter“ durchsuchen die übereinstimmenden Zeichen der Reihe nach und verwenden einen anderen Stil, um das aktuell übereinstimmende Zeichen von anderen übereinstimmenden Zeichen zu unterscheiden.
Die Frontend-Anzeige sieht wahrscheinlich so aus:
Der HTML-Code sieht so aus:
<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>Skriptcode:
<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>Denken Sie als Nächstes an das Implementierungsprinzip:
Löschen Sie zuerst die letzten Abfrageergebnisse und verwenden Sie dann reguläre Ausdrücke, um alle Übereinstimmungen im Bereich basierend darauf abzugleichen der Schlüsselwert Alle Zeichen werden mit einem speziellen Stil hinzugefügt. Beispielsweise wird der Methode ein Span-Tag mit dem Klassennamen Ergebnis hinzugefügt und die Variable odKey0 wird verwendet, um den Wert des Schlüssels aufzuzeichnen (bei der nächsten Eingabe zuerst vergleichen). . Wenn sie gleich sind, bedeutet dies, dass Sie sich den nächsten oder vorherigen Inhalt ansehen müssen. Bei der Eingabe ist kein regulärer Ausdrucksabgleich erforderlich. OldCount0 zeichnet die Gesamtzahl der Abfragen auf, und newflag ist auf 0 gesetzt (wenn es nicht die erste Abfrage ist, ist newflag 1).
Geben Sie dann die getNext-Methode ein, um anzuzeigen, ob der Benutzer die vorherige oder die nächste Schaltfläche gedrückt hat. Vergleichen Sie es mit oldCount0, um festzustellen, ob es erhöht oder verringert wird 0 (Wenn es größer als oldCount0 oder kleiner als 0 ist, wird es erneut gestartet).
Die focusMove-Methode dient dazu, die Seite auf das aktuelle Element zu positionieren.
Erlernte Jquery-Methoden:
eq() Selektor: Der Selektor wählt Elemente mit dem angegebenen Indexwert aus. Beispiel: $(".contrast .result:eq(1)") wählt das zweite Element mit dem Namen „result“ unter den Elementen aus, deren Klassenname „Contrast“ lautet.
parents()-Methode: alle übergeordneten Elemente des Elements. $("p").parents('.contrast-wrap'), alle p-Elemente, deren Klassenname „contrast-wrap“ ist.
replace()-Methode: Ersetzen Sie das ausgewählte Element durch den angegebenen HTML-Inhalt. Beachten Sie, dass auch die Elemente des ausgewählten Elements ersetzt werden.
offset()-Methode: Gibt den Offset (Position) des übereinstimmenden Elements relativ zum Dokument zurück oder legt diesen fest.
scrollTop()-Methode: Gibt die vertikale Position der Bildlaufleiste des passenden Elements zurück oder legt sie fest.
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.
Verwandte Empfehlungen:
Zusammenfassung von Listen, Formularen und semantischer Verwendung von HTML
Chart.js leichte HTML5-Diagrammzeichnungstool-Bibliothek mit detaillierten Schritten zur Verwendung
Das obige ist der detaillierte Inhalt vonHTML-Suchfeldfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
