JavaScript/Tutorials/Formulare/Suchen und Filtern
Text-Info
- 20min
- leicht
- Grundkenntnisse in
• Formulare in HTML
• CSS
Es wird immer wieder gefragt, wie man eine Suchfunktion in einem HTML-Dokument oder auf einer Webseite realisieren kann.
Dieses Tutorial soll einige Wege aufzeigen und dabei den Unterschied zwischen dem Durchsuchen von Inhalten einerseits und dem Filtern von Suchvorschlägen andererseits herausstellen.
Inhaltsverzeichnis
Vorüberlegungen[Bearbeiten]
Eine Suche innerhalb der aktuellen Seite ist in jedem Browser über das Menü oder mit STRG F möglich. Diese Tastenkombination ist vielen Nutzern bereits aus Textverarbeitungen wie MS Word bekannt.[1]
Eine Suche innerhalb einer Webseite mit mehreren Unterseiten ist entweder bereits in vielen CMS integriert oder muss serverseitig erfolgen. Alternativ kann man auf externe Suchmaschinen zurückgreifen, was Nutzer aber aus dem eigenen Webauftritt wegführt.
<form role="search" action="https://duckduckgo.com/">
<input name="q" type="search" aria-label="Suche auf selfhtml.org"/>
<input name="sites" type="hidden" value="selfhtml.org"/>
<button>Suchen</button>
</form>
Das Eingabefeld für die Suchbegriffe sollte den Namen q haben, damit beim Absenden der von DuckDuckGo erwartete Parameter q draus wird. Für die Angabe der Website(s) brauchen wir noch ein Eingabefeld namens sites mit type="hidden", da das ja nicht zu sehen sein soll, sondern nur der Übermittlung des Parameters dient, der dort als value drinsteht.
ToDo (weitere ToDos)
https://forum.selfhtml.org/self/2022/apr/23/dursuchbares-archiv-mit-details/1798678#m1798678
--Matthias Scharwies (Diskussion)
gefilterte Suche mit JavaScript[Bearbeiten]
Auf umfangreichen Seiten mit vielen Informationen ist es eine gute Idee, die Benutzer nach von ihnen gewünschten Begriffen suchen zu lassen.
Die Benutzer können hierfür bereits die integrierte Browsersuche verwenden, aber wir können diese Funktion noch erweitern, indem wir unsere eigene Suchfunktion anbieten, die die Seite nach unten filtert und so die passenden Ergebnisse leichter finden und lesen lässt.[2]
Das Script wird …
- alle Inhalte finden, die wir durchsuchen wollen,
- beobachten, was ein Benutzer in die Sucheingabe eingibt,
- den innerText der durchsuchbaren Elemente filtern,
- testen, ob der Text den Suchbegriff enthält (.includes() ist hier das A und O!), und
- die Sichtbarkeit der (übergeordneten) Elemente umschalten, je nachdem, ob sie den Suchbegriff enthalten oder nicht.
Combo Box[Bearbeiten]
Eine Combobox ist ein Widget, das aus der Kombination von zwei verschiedenen Elementen besteht:
- ein einzeiliges Textfeld und
- ein zugehöriges Popup-Element, das dem Benutzer hilft, den Wert des Textfeldes einzustellen. Das Popup-Element kann eine Listbox, ein Grid, ein Baum oder ein Dialog sein. Viele Implementierungen enthalten auch ein drittes optionales Element - eine grafische Schaltfläche neben dem Textfeld, die die Verfügbarkeit des Popup-Fensters anzeigt. Wenn die Schaltfläche aktiviert wird, wird das Popup angezeigt, wenn Vorschläge verfügbar sind.[3]
https://wet-boew.github.io/wet-boew-documentation/research/1-datalist-JSON-suggestion.html
HTML Combobox With JavaScript and CSS | Combobox Types & Patterns
[4]
Weblinks[Bearbeiten]
- ↑ SELF-Forum: Suchfunktion auf Homepage
- ↑ css-tricks: In-Page Filtered Search With Vanilla JavaScript von Hilman Ramadhan, Oct 26, 2021
- ↑ W3C: 3.8 Combo Box WAI-ARIA Authoring Practices 1.1
W3C Working Group Note 14 August 2019 - ↑ W3C: role="combobox" WAI-ARIA
PHP-Suchscripte[Bearbeiten]
ToDo (weitere ToDos)
