Eine einfache und effiziente Möglichkeit, einem HTML-SELECT-Element eine Suchfunktion hinzuzufügen

Die Auswahl eines bestimmten Elements aus einer Liste kann schwierig sein, insbesondere wenn die Liste viele Elemente enthält. Das Suchen in einer Liste kann diese Aufgabe jedoch erheblich erleichtern. In HTML gibt es eine Möglichkeit, ein Suchauswahlfeld zu erstellen, das es dem Benutzer ermöglicht, die gewünschten Elemente sofort zu finden.

Eine Methode, mit der Sie einem Element ein Suchfeld hinzufügen können select, heißt "select2". Zuerst müssen Sie die select2-Bibliothek verbinden, indem Sie einen Verweis auf ihre Dateien im Abschnitt hinzufügen head ihr HTML-Dokument. Sie können vorgefertigte Bibliotheksdateien verwenden oder CDN-Links verwenden.

Nachdem die Bibliothek verbunden ist, wird das Element select sie müssen eine CSS-Klasse hinzufügen, damit select2 sie verarbeiten kann. Dazu wird ein Attribut verwendet class. Dann müssen Sie den folgenden JavaScript-Code hinzufügen:

Was ist ein Auswahlfeld mit Suche

Wenn der Benutzer auf das Auswahlfeld mit der Suche klickt, wird eine Dropdown-Liste geöffnet, in der die verfügbaren Optionen angezeigt werden. Wenn Sie Text in das Suchfeld eingeben, wird die Liste automatisch gefiltert und nur die Optionen, die den eingegebenen Text enthalten, werden angezeigt.

Das Suchauswahlfeld erleichtert es dem Benutzer, aus einer Vielzahl möglicher Werte auszuwählen, da er das gewünschte Element schnell finden kann, indem er seinen Namen oder einen Teil des Namens in das Suchfeld eingibt. Dies ist besonders nützlich, wenn eine Auswahlliste viele Elemente enthält oder wenn Sie ein Element anhand komplexer Kriterien wie Datum oder Nummer suchen müssen.

Diese Suchauswahlfelder werden häufig von Webentwicklern verwendet, um die Benutzerfreundlichkeit von Formularen auf Websites zu verbessern. Sie helfen, Fehler bei der Auswahl eines Werts zu reduzieren, den Auswahlprozess zu beschleunigen und die Benutzerfreundlichkeit der Interaktion mit einer Webseite zu verbessern.

Warum brauchen Sie ein Auswahlfeld mit einer Suche

Ein Suchauswahlfeld ist normalerweise ein kombiniertes Element, das aus einer Dropdown-Liste und einem Textfeld besteht, in das der Benutzer Text eingeben kann, um nach der gewünschten Option zu suchen. Wenn Sie Text in das Suchfeld eingeben, wird die Auswahlliste gefiltert, sodass nur diejenigen angezeigt werden, die mit dem eingegebenen Text übereinstimmen. Dies ermöglicht es dem Benutzer, die gewünschte Option schnell zu finden, auch wenn die Liste Hunderte oder Tausende von Optionen enthält.

Wie funktioniert das Auswahlfeld mit der Suche

Wenn der Benutzer mit der Eingabe von Text in das Suchauswahlfeld beginnt, wird JavaScript ausgelöst und die Liste der Optionen in Echtzeit gefiltert. Es verbirgt alle Optionen außer denen, die das vom Benutzer eingegebene Schlüsselwort enthalten. Der Benutzer kann eine Option auswählen, indem er mit der Maus darauf klickt oder mit der Tastatur durch die Liste navigiert.

Sie können verschiedene JavaScript-Erweiterungen oder Bibliotheken wie Select2, Chosen oder Bootstrap Select verwenden, um ein solches Auswahlfeld mit der Suche zu erstellen. Sie bieten vorgefertigte Lösungen, die leicht angepasst und in Ihren Projekten verwendet werden können.

Es ist wichtig zu beachten, dass das Suchauswahlfeld nicht nur für ein Standard-HTML-Element verfügbar ist , sondern auch für andere Elemente wie oder . Dies macht es flexibler und ermöglicht es Ihnen, es in verschiedenen Szenarien anzuwenden und sein Aussehen und Verhalten anzupassen.

Wie erstelle ich ein Auswahlfeld mit einer Suche in HTML

Webentwickler haben die Möglichkeit, ein Auswahlfeld mit einer Suche in HTML zu erstellen, indem sie das Element in Kombination mit etwas JavaScript und CSS verwenden. Dies kann nützlich sein, wenn es eine große Anzahl von Auswahlmöglichkeiten gibt oder wenn der Benutzer eine bestimmte Option einfach und schnell finden muss.

Erstellen Sie eine HTML-Struktur für Ihr Auswahlfeld:

Вариант 1Вариант 2Вариант 3Вариант 4Вариант 5Вариант 6

document.getElementById('search-input').addEventListener('input', function() -1) else >>);

Jetzt sollten Sie ein Auswahlfeld mit einer Suche in Ihrem HTML-Formular haben. Wenn der Benutzer Text in das Suchfeld eingibt, bleiben die Auswahlmöglichkeiten, die dem eingegebenen Text entsprechen, sichtbar und der Rest wird ausgeblendet.

Hinzufügen von Stilen

Sie können eine Stilisierung hinzufügen, um das Suchauswahlfeld attraktiver aussehen zu lassen und dem allgemeinen Seitenstil zu entsprechen.

Sie können dazu CSS verwenden. Legen Sie beispielsweise die Hintergrundfarbe, Schriftart und Textgröße fest, fügen Sie einen Rahmen hinzu und runden Sie die Ecken des Auswahlfeldes ab.

Hier ist ein Beispiel für CSS-Code, den Sie Ihrem Seitenstil hinzufügen können:

 .custom-select 

Hier verwenden wir eine Klasse. "custom-select", um das Auswahlfeld zu formatieren.

Um das Styling auf das Suchauswahlfeld anzuwenden, fügen Sie diese Klasse einfach dem entsprechenden Element hinzu:

 . 

Ihr Suchauswahlfeld sollte jetzt attraktiver aussehen und in den allgemeinen Stil Ihrer Seite passen.

Verwenden von JavaScript zum Suchen und Filtern

Um zu beginnen, müssen Sie HTML-Elemente für die Suche hinzufügen. Sie können ein Textfeld zum Eingeben einer Suchabfrage und eine Tabelle zum Anzeigen der gefilterten Ergebnisse erstellen. Beachten Sie, dass die Tabelle die Elemente thead , tbody und tr enthält, um die Daten zu strukturieren.

Im Folgenden finden Sie ein Beispiel für HTML- und JavaScript-Code, der die Verwendung von JavaScript zum Suchen und Filtern veranschaulicht:

Элемент 1Элемент 2Элемент 3Элемент 4
Название
Описание
let input = document.getElementById('searchInput');let table = document.getElementById('table');input.addEventListener('input', function()