Erstellen Sie eine bearbeitbare ComboBox in JavaScript
Wir verwenden das Eingabeformularfeld an vielen Stellen, insbesondere bei der Arbeit mit HTML-Formularen.
Das Eingabefeld erlaubt uns nur eine einzige Funktion, nämlich die Eingabe des Textes in das Eingabefeld. Und wenn Sie andere Funktionen wie eine Dropdown-Liste hinzufügen möchten, müssen Sie ein anderes HTML-Element verwenden, um dies zu implementieren.
Was ist, wenn Sie diese beiden Funktionalitäten im Eingabefeld selbst implementieren möchten? Ist es überhaupt möglich?
Ja, dies ist mit Hilfe einer datalist möglich. Mit datalist können wir eine editierbare ComboBox erstellen, die gleichzeitig zwei Funktionalitäten (d.h. Texteingabe und Dropdown-Liste) erfüllt.
Erstellen Sie eine bearbeitbare ComboBox in JavaScript
Unten haben wir ein HTML-Dokument, das aus einem label-Tag und einem script-Tag innerhalb des body-Tags besteht. Das Label ist nur ein Text, der dem Benutzer hilft, Informationen über die ComboBox bereitzustellen.
Und mit dem script-Tag haben wir eine JavaScript-Datei verlinkt, in der wir unseren Code schreiben werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>List of Countries: </label>
<script src="./index.js"></script>
</body>
</html>
Ausgabe:
List of Countries:
Wenn Sie den Code ausführen, erhalten Sie die obige Ausgabe. Um eine bearbeitbare ComboBox in JavaScript zu erstellen, müssen wir die folgenden Schritte ausführen.
Schritt 1: Erstellen einer datalist in JavaScript
Unser Ziel ist es, eine Kombination aus einem Eingabefeld und einer Dropdown-Liste zu erstellen.
Zuerst erstellen wir eine datalist-Liste und dann ein Eingabefeld. Danach fügen wir dem Eingabefeld die datalist hinzu.
Ein HTML-Element datalist erstellt eine Liste, die eine Reihe von Optionen enthält, aus denen ein Benutzer auswählen kann. Die Optionen innerhalb der datalist werden durch das HTML-Element option repräsentiert.
Unten haben wir eine Funktion namens createDataList() erstellt, die die datalist erstellt. Innerhalb dieser Funktion haben wir ein Array von Werten erstellt, in dem wir alle Optionen angegeben haben, die in der datalist angezeigt werden.
Je nach Bedarf können Sie der datalist beliebig viele Optionen hinzufügen. Um eine datalist zu erstellen, verwenden wir die Funktion document.createElement() und übergeben datalist als Parameter und speichern die datalist in der Variablen datalist.
Dann setzen wir dieser datalist mit dataList.id eine ID. Um die in der Variable values gespeicherten Optionen zur datalist hinzuzufügen, haben wir innerhalb des Arrays definiert; Wir werden eine forEach-Schleife verwenden, um über jedes Array-Element zu iterieren.
Jedes Array-Element wird durch die Schleife forEach in der Variablen value gespeichert. Innerhalb des forEach erstellen wir ein option-HTML-Element.
Dieses option-HTML-Element wird bei jeder Iteration für jede Option erstellt.
function createDataList() {
var values =
['Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa'];
var dataList = document.createElement('datalist');
dataList.id = 'country_list';
values.forEach(value => {
var option = document.createElement('option');
option.innerHTML = value;
option.value = value;
dataList.appendChild(option);
})
document.body.appendChild(dataList);
}
createDataList();
Mit option.innerHTML geben wir an, welche Daten wir nach Auswahl einer bestimmten Option aus der Liste anzeigen. Der option.value gibt an, welche Daten angezeigt werden, wenn die Liste sichtbar ist.
Wenn zum Beispiel option.innerHTML = "IN" und option.value = "INDIA", wenn die Liste sichtbar ist, sehen Sie INDIA als Option, aber nachdem Sie die Option INDIA ausgewählt haben, darin Im Eingabefeld erhalten Sie IN. In unserem Beispiel setzen wir beide Werte gleich.
Nachdem wir unserer Option einen Wert zugewiesen haben, können wir diese Option an die datalist anhängen. Nachdem wir der datalist alle Optionen zugewiesen haben, können wir die datalist mit der Funktion appendChild an das Body-Tag anhängen.
Am Ende rufen wir die Funktion createDataList() auf, die die datalist erstellt. Vergessen Sie nicht, diese Funktion aufzurufen; Andernfalls wird die datalist nicht erstellt.
Schritt 2: Hinzufügen von datalist zu einem Eingabefeld
Nachdem wir nun die datalist erstellt haben, können wir diese Liste dem Eingabefeld hinzufügen.
Dazu müssen wir zuerst ein input-Tag in unserem HTML-Dokument erstellen. Auf diesem input-Tag müssen wir einige Attribute angeben, wie zum Beispiel:
type: Der Datentyp, den das Eingabefeld annehmen kann. In unserem Fall geben wir den Ländernamen ein, der ein Text ist, um den Typ alstextanzugeben.id: Eindeutige ID für das Eingabefeld.list: Dies ist das wichtigste Attribut, und dieses Attribut muss angegeben werden, wenn Sie einedatalistverwenden. Hier ist der Wert dieses Attributs dieiddesdatalist-Elements, die wir beim Erstellen desdatalist-Elements angegeben haben.
<input type="text" id="country" list="country_list">
Dies war der gesamte Prozess zum Erstellen einer bearbeitbaren ComboBox in JavaScript. Jetzt führen Sie den Code in Ihrem Browser aus, um die Ausgabe anzuzeigen.
Wenn Sie nach dem Laden der Webseite im Browser auf das Eingabefeld doppelklicken, wird die gesamte Liste mit den Optionen angezeigt, die wir in der datalist wie oben gezeigt definiert haben.
Wenn Sie beginnen, die Buchstaben in das Eingabefeld einzugeben, wird Ihnen auch die Liste angezeigt. Die in der Liste angezeigten Optionen können jedoch variieren, je nachdem, welche Buchstaben Sie eingeben.
Oben können wir eine bearbeitbare ComboBox mit doppelter Funktionalität von Eingabefeld und Dropdown-Liste mit JavaScript erstellen und verwenden.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn