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 als text anzugeben.
  • id: Eindeutige ID für das Eingabefeld.
  • list: Dies ist das wichtigste Attribut, und dieses Attribut muss angegeben werden, wenn Sie eine datalist verwenden. Hier ist der Wert dieses Attributs die id des datalist-Elements, die wir beim Erstellen des datalist-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.

Javascript-Kombinationsfeld_1

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.

Javascript-Combobox_2

Oben können wir eine bearbeitbare ComboBox mit doppelter Funktionalität von Eingabefeld und Dropdown-Liste mit JavaScript erstellen und verwenden.