Implementieren Sie die Suchfunktion in einer HTML-Seite mit js

Heute werde ich über eine Funktion sprechen, an der ich in den letzten Tagen gearbeitet habe, nämlich die Suchfunktion der HTML-Seite. Diese Funktion wird hauptsächlich durch die Eingabe von Zeichen in das Suchfeld html und das anschließende Drücken der Schaltflächen „Zurück“ und „Weiter“ implementiert. Die übereinstimmenden Zeichen im Abfragebereich werden automatisch mit einem speziellen Stil markiert. Sie können dann fortfahren Drücken Sie die vorherige Schaltfläche, um die übereinstimmenden Zeichen der Reihe nach zu durchsuchen und ein anderes Muster zu verwenden, um das aktuell übereinstimmende Zeichen von anderen übereinstimmenden Zeichen zu unterscheiden. Bezahlen Sie mit HTML-Code!

Stil-Demo:

Code-Demo:

html

<div class="container" style="z-index: 999" id="searchDiv">
<div class="keyword-search">
查找：
<input id="key" type="text" style="width: 200px;" placeholder="关键词" />
<a href="javascript:void(0);" class="prev" onclick=&#39;wordSearch(1)&#39;><i class="c-icon"></i></a>
<a href="javascript:void(0);" class="next" onclick=&#39;wordSearch()&#39;><i class="c-icon"></i></a>
</div>
</div>

Skript

    <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=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                    });
                } else {
                    $(".contrast-wrap").addClass(&#39;current&#39;);
                    currentLength = $(".current").length;
                    $(".contrast").each(function () {
                        $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id=&#39;result" + (index++) + "&#39; class=&#39;result&#39;>" + key + "</span>")); // 替换
                    });
                }
                //$("#key").val(key);
                oldKey0 = key;

                //$(".contrast .result").each(function () {
                //    $(this).parents(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
                //    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(&#39;.contrast-wrap&#39;).addClass(&#39;current&#39;);
            $(".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);
            }

        }


        $(&#39;#key&#39;).change(function () {
            if ($(&#39;#key&#39;).val() == "") {
                index0 = 0;
                $(".contrast .result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                oldKey0 = "";
            }
        });
    </script>

Als nächstes beachten Sie das Implementierungsprinzip:

Löschen Sie zunächst die letzten Abfrageergebnisse und fügen Sie dann mithilfe regulärer Ausdrücke allen übereinstimmenden Zeichen im Bereich basierend auf dem Schlüsselwert alle hinzu Tag mit dem Klassennamen result. Verwenden Sie die Variable odKey0, um den Wert des Schlüssels aufzuzeichnen (vergleichen Sie ihn zuerst, wenn Sie ihn das nächste Mal eingeben. Wenn sie gleich sind, bedeutet das, dass Sie sich den nächsten oder vorherigen Inhalt ansehen müssen Sie müssen den Vergleich mit regulären Ausdrücken nicht erneut verwenden. oldCount0 zeichnet die Gesamtzahl der Abfragen auf und newflag wird 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.

Verwandte Empfehlungen:

So implementieren Sie Karussellcode für digitale Fokusdiagramme in HTML

So fügen Sie Bilder in HTML ein

Was tun, wenn sich DIVs in HTML überlappen

So verwenden Sie es in HTML Margin 0 Auto

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Suchfunktion in einer HTML-Seite mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!