In-Page-gefilterte Suche mit Vanille JavaScript

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 .

Nutzung von JavaScript

In diesem Tutorial wird JavaScript verwendet, um alle interaktiven Elemente zu verwalten. Insbesondere wird es:

1. Identifizieren Sie durchsuchbare Inhalte.
2. Überwachen Sie die Benutzereingabe im Suchfeld.
3. Filtern Sie den innerText von durchsuchbaren Elementen.
4. Überprüfen Sie, ob der Text den Suchbegriff enthält ( .includes() ist hier der Schlüssel).
5. Sichtbarkeit des Elements Basierend auf Suchbegriff übereinstimmen.

Grundlegende HTML -Struktur

Nehmen wir eine FAQ -Seite an, auf der jede Frage als "Karte" mit einem Titel und Inhalt dargestellt wird:

<h1 id="FAQ-Abschnitt"> FAQ -Abschnitt</h1>

<div>
  <h3 id="Wer-sind-wir">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 id="Was-wir-tun">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 id="Warum-hier-arbeiten">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 id="Erfahren-Sie-mehr">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">

Kern -JavaScript -Funktionalität

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.

Erweiterende Suchfunktionen: Fuzzy -Matching

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 id="Wer-sind-wir">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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="In-Page-gefilterte Suche mit Vanille JavaScript">

Passen Sie liveSearch an, um getAttribute('alt') zu verwenden, um Attributwerte zu durchsuchen.

Wichtiger Hinweis

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.

Abschluss

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!