Verbessern Sie die Benutzererfahrung auf informationsreichen Seiten mit einer einfachen, aufseitlichen Suchfunktion. Vergessen Sie Datenbankabfragen oder JSON -Parsen - Diese Methode durchsucht direkt den gerenderten Textinhalt einer Webseite. Während der integrierte Browser-integrierte Suche vorhanden ist, bietet dieser Ansatz ein raffiniertes Filtererlebnis, in dem relevante Ergebnisse für die einfachere Navigation hervorgehoben werden.
Hier ist eine Live -Demo, die die Funktionalität zeigt: [Link zur Demo]
Ich verwende diese Technik in einem realen Projekt: https://www.php.cn/link/2a60eed05079970d61abad679da7ae8f .
In diesem Tutorial wird JavaScript verwendet, um alle interaktiven Elemente zu verwalten. Insbesondere wird es:
innerText
von durchsuchbaren Elementen..includes()
ist hier der Schlüssel).Nehmen wir eine FAQ -Seite an, auf der jede Frage als "Karte" mit einem Titel und Inhalt dargestellt wird:
<h1> FAQ -Abschnitt</h1> <div> <h3>Wer sind wir</h3> <p>Es hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in elektronische Artensettung und blieb im Wesentlichen unverändert. Es wurde populär gemacht</p> </div> <div> <h3>Was wir tun</h3> <p>Es hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in elektronische Artensettung und blieb im Wesentlichen unverändert. Es wurde populär gemacht</p> </div> <div> <h3>Warum hier arbeiten?</h3> <p>Es hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in elektronische Artensettung und blieb im Wesentlichen unverändert. Es wurde populär gemacht</p> </div> <div> <h3>Erfahren Sie mehr</h3> <p>Möchten Sie mehr über uns erfahren?</p> </div>
Für eine Seite mit zahlreichen Fragen skaliert diese Struktur effektiv.
Um die Interaktivität zu ermöglichen, verwenden wir eine einzelne CSS -Regel:
.Is versteckt {display: keine; }
Diese Klasse wird dynamisch hinzugefügt oder entfernt, um die Sichtbarkeit der Elemente zu steuern. Wir werden auch eine Sucheingabe hinzufügen:
<label for="searchbox">Suchen:</label> <input type="text" id="searchbox">
Der folgende JavaScript -Code verwaltet die Suchfunktion:
Funktion Livessearch () { let karten = document.querySelectorAll ('. Karten'); // Kartenelemente auswählen SET SEECKQUERY = DOCUMENT.GetElementById ("SearchBox"). Wert; // Suchbegriff erhalten cards.foreach (card => { lass textContent = card.inNertext.tolowerCase (); // Normalisieren Sie in Kleinbuchstaben suchtermlower = searchQuery.tolowerCase (); // Normalisieren Sie in Kleinbuchstaben if (textContent.includes (Suchtermlower)) { card.classList.remove ('is versteckt'); // passende Karten anzeigen } anders { CARD.CLASSLIST.ADD ('is-versteckt'); // Karten nicht übereinstimmende Karten verbergen } }); } // Fügen Sie eine kleine Verzögerung hinzu, um übermäßige Funktionsaufrufe zu verhindern Lassen Sie TypingTimer; typinterval = 500; // eine halbe Sekunde SET SEECKINPUT = DOCUMENT.GetElementById ('SearchBox'); SearchInput.AdDeVentListener ('KeyUp', () => { Clearimeout (TypingTimer); typingTimer = setTimeout (livessearch, typinterval); });
Der Code iteriert Karten, prüft nach Suchbegriff (Fall-unempfindlich) und aktualisiert die Sichtbarkeit entsprechend. Eine Verzögerung verhindert Leistungsprobleme durch schnelle Tastenanschläge.
Um die Fuzzy -Matching zu integrieren (nach verwandten Schlüsselwörtern zu suchen, auch wenn sie nicht explizit angezeigt werden), sollten Sie versteckte Elemente oder Attribute verwenden:
Methode 1: Versteckte Elemente
Fügen Sie versteckte Elemente hinzu, die Schlüsselwörter enthalten:
<div> <h3>Wer sind wir</h3> <p>...</p> <span class="hidden-keywords">Geheimnis, Gesellschaft, Geschichte</span> </div>
Ändern Sie liveSearch
so, dass sie textContent
anstelle von innerText
einbeziehen, um auf verborgene Schlüsselwörter zuzugreifen.
Methode 2: Attribute
Verwenden Sie Attribute wie alt
für Bilder:
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg" class="lazy" alt="In-Page-gefilterte Suche mit Vanille JavaScript">
Passen Sie liveSearch
an, um getAttribute('alt')
zu verwenden, um Attributwerte zu durchsuchen.
Diese Suchmethode ist auf Inhalte beschränkt, die bereits im DOM gerendert wurden. Es ist nicht geeignet, nach externen Datenbanken oder großen Datensätzen zu suchen.
Diese einfache, aber effektive Suchlösung, die mit Vanille-JavaScript implementiert ist, kann die Verwendbarkeit von Webseiten mit umfangreichen Inhalten erheblich verbessern. Passen Sie diese Technik an und erweitern Sie diese Technik an verschiedene Anwendungen, von FAQ -Seiten bis hin zu Bildgalerien.
Das obige ist der detaillierte Inhalt vonIn-Page-gefilterte Suche mit Vanille JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!