So erstellen Sie einen Datalisten, der sofort durchsuchbar ist

Dropdown-Listen sind ein guter Weg für Möglichkeiten bieten für ein Eingabefeld, insbesondere wenn die Liste der verfügbaren Optionen lang ist. Ein Benutzer kann die gewünschte Option auswählen Tippen in das Feld, oder Durchsuchen Sie die Optionen Das könnte eine Übereinstimmung für das sein, wonach sie suchen. Durchsuchen der Optionen, ist jedoch die ideale Lösung.

Dieses Verhalten kann mit der erreicht werden HTML-Element das zeigt Eingabevorschläge an für verschiedene Steuerelemente, wie z Etikett. jedoch Zeigt nur die verfügbaren Optionen an, wenn der Benutzer dies getan hat schon etwas eingetippt in das Eingabefeld.

Wir können ein Eingabefeld nutzbarer machen, wenn wir es Benutzern ermöglichen Zugriff auf die vollständige Liste der Optionen zu jeder Zeit während der Eingabe.

In diesem Beitrag werden wir sehen, wie man eine erstellt Dropdown-Liste, die jederzeit durchsuchbar ist Verwendung der Etikett ist das gleiche wie das Ich würde des tag - so binden wir sie aneinander.

2. Machen Sie den Datalist sichtbar

Standardmäßig ist die HTML-Element ist versteckt. Wir können es nur sehen, wenn wir Beginnen Sie mit der Eingabe einer Eingabe in das Feld, an das der Datalist angeschlossen ist.

Es gibt jedoch eine Möglichkeit, den Inhalt des Datalisten "zu erzwingen" (d. H. Alle Optionen). auf der Webseite erscheinen. Wir müssen nur ein passendes geben Anzeige Eigentumswert außer keiner, zum Beispiel Bildschirmsperre;.

 datalist display: block;

Die angezeigten Optionen sind noch nicht auswählbar An dieser Stelle nur der Browser macht die Optionen es findet sich innerhalb des Datengebers.

Wie bereits erwähnt, aufgrund des eingebauten Verhaltens des Element, Ein Teil der Optionen wird bereits angezeigt und kann ausgewählt werden, aber nur, wenn der Benutzer beginnt, eine Zeichenfolge einzugeben, zu der der Browser fähig ist Finden Sie eine passende Option.

Wir müssen auch einen Mechanismus finden, den wir machen können alles Optionen (auf dem obigen Screenshot, der unter der Dropdown-Liste angezeigt wird) wählbar beim jeder andere Punkt des Eingabeaufnahmevorgangs - Wenn Benutzer die Optionen auschecken möchten, bevor sie etwas eingeben oder wenn sie bereits etwas in das Eingabefeld aufgenommen haben.

3. Bringen Sie das ein HTML-Element.

Wir wählen die zweite Methode, da sie einfacher ist und verwendet werden darf als Rückfallmechanismus in Browsern, die das nicht unterstützen Element. Wenn ein Browser die Datenanzeige nicht rendern und anzeigen kann, ist dies der Fall macht das HTML-Tag, der Code sieht wie folgt aus:

Datenhändler kombiniert mit Hinzufügen der mehrere Attribut zum Wenn der Benutzer eine Option aus der Dropdown-Liste auswählt, wird dessen Wert im angezeigt Feld auch. / * Wenn der Benutzer eine Option aus DDL auswählt, schreiben Sie diese in das Textfeld. * / select.addEventListener ('change', fill_input); function fill_input () input.value = Optionen [this.selectedIndex] .value; hide_select (); Nachteile Der Hauptnachteil dieser Technik ist die Fehlen eines direkten Weges, um die Element mit CSS (das Aussehen der und