Datalist das bessere selection?!

Shellkraut

2025-08-01 19:49

Selection-Lists sind schon eine nette Sache.
Für den Benutzer, er muss nicht erraten was zur Auswahl steht und ggf. wie es richtig zu schreiben ist damit die Anwendung es auch versteht.
Und für Ersteller, er braucht nicht aus der Benutzereingabe zu erraten welche der Optionen wohl die richtige sein könnte - validieren muss er das was er zurückbekommt natürlich trotzdem.
Also eigentlich alles in Butter… bis sagen wir die Liste nicht mehr aus 4 Arten von Eiscreme besteht, sondern lang wird… sehr lang…
Dann wird es nervend durch die Liste zu scrollen und den richtigen Eintrag zu suchen.
Leider gibt es in selection keine Möglichkeit zu suchen.

Und noch ein Szenario gibt es wo selection an die Grenzen stößt: Was wenn man dem Benutzer eine Liste mit Auswahl geben will, aber gleichzeitig die Option einen anderen Wert manuell einzugeben?

Datalist zur Rettung

Datalist ist kein eigenständiges Input-Element, wiel selection sondern kann in Verbindung mit anderen Input-Elementen genutzt werden um eine Liste von Vorschlägen für Werte bereit zu stellen.
U.a. mögliche Kombinationen sind input typen: "text", "search", "tel", "email", "number".

<html>
	<head>
	</head>
	<body>
		<form action="http://127.0.0.1/blubber.htm" method="Get">
		<input name="customer" type="text" list="customerlist"/>(1)
		<datalist id="customerlist">(2)
			<option value="1">Franziska Fischer</option>(3)
			<option value="2">Dörde Bäcker</option>
			<option value="3">Arne Becker</option>
		</datalist>
		<button type="submit">Absenden</button>
		</form>
	</body>
</html>

Definiert ein input-Feld vom Typ Text. Das Attribut list definiert dabei die id eines Datalist-Elments was die Vorschläge enthält.
Definiert ein datalist-Element. Das id-Attribut von datalist und das list-Attribut von input enthalten den gleichen Wert und verknüpfen so die beiden Elemente.
option definiert jeweils einen Eintrag in der anzuzeigenden Liste - ähnlich wie bei selection .
Die Reihenfolge der Einträge ist wie die Liste angezeigt wird.
value definiert den Wert der beim senden des Formulars übertragen wird. Würde im Feld "customer" aus der Liste "Dörde Bäcker" ausgewählt würde beim absenden des Formulars "customer=2" übertragen werden - in diesem Fall hier "http://127.0.0.1/blubber.htm?customer=2", da das Formular einen Get-Request sendet, bei POST wäre es entsprechend im Body gesetzt.
Der Element-Text - z.B. "Dörde Bäcker" oder das label-Attribut setzen den in der Liste anzuzeigenden Wert.

So sieht das dann aus:

Figure 1. Ungeklickter Zustand

Figure 2. Geklickter Zustand

Text field with number 2 in it, drop-down showing the options + the field of value

Figure 3. Nach dem auswählen eines Eintrages in Chromium

Wenn man einen der Werte aus der Liste nimmt wird der Wert im value-Attribut gesendet. In obigem Fall wäre dann customer="2"+

Text field with value "Peter Meixner" in it

Figure 4. Per Hand eingegeben Eintrag

Gibt man manuell einen Wert ein, also wählt nicht aus der Liste wird übertragen was man eingegeben hatte, in obigem Fall dann customer="Peter Meixner"

Durch Eingabe eines Buchstabens in das Feld, wird die dazugehörige datalist gefiltert:

Figure 5. Suche durch Eingabe eines Buchstabens.

Figure 6. Suche durch Eingabe eines Buchstabens.

Dabei wird Fuzzy-Search angewendet, es wird also nicht der Anfang eines Wortes gesucht, sondern das vorkommen der Eingabe irgendwo im label bzw. text der option-Elemente aka. Listeneinträge.
Das ist praktisch wenn man z.B. zusammengesetzte Felder wie Vor- und Nachname hat und möglichst nach beidem filtern können möchte.

Einschränkungen

maximal 512 Einträge
alte Browser haben ggf. keine Unterstützung/keine komplette
der Benutzer kann die Einträge benutzen, es hindert ihn aber auch nichts daran einen beliebigen eigenen Wert in das input-Feld zu schreiben (im Rahmen der Regeln des jeweiligen Input-Feldes)
- es ist also NICHT identisch mit der Funktionalität von selection, überschneidet sich allerdings
einige Browser (Chromium-basierte) zeigen den Wert aus value zusätzlich zu dem label oder dem Text des option-Elements an

Figure 7. Chromium zeigt auch die Werte aus value an (die Ziffern)

Figure 8. Firefox zeigt die Werte aus value nicht (keine Ziffern)

Auch wenn die Darstellung in beiden Fällen unterschiedlich ist, wird in beiden Fällen nur der Wert der in value im ausgewählten Option-Element steht gesendet.

Nach dem Auswählen einer Option wird (in allen Browsern) der Wert in value angezeigt, nicht mehr label oder text des Option-Elements

Figure 9. Nach dem auswählen eines Eintrages

Nützliche Tipps

Hat der Benutzer irgendwann mal eine manuelle Eingabe gemacht in der Vergangenheit tauch diese zukünftig mit in der Liste auf - getrennt durch eine horizontale Linie von den restlichen Vorschlägen.
Das ist ggf. unerwünscht, weil verwirrend für den Benutzer, vor allem wenn die Liste alle Möglichkeiten umfasst.

Figure 10. Chromium zeigt die Autofill-Werte am unteren Ende der Liste an - hier die 6

Figure 11. Firefox zeigt die Autofill-Werte am oberen Ende der Liste an - hier die 3

Die Autoverfollständigung lässt sich abschalten, in dem man das das autocomplete-Attribut des Input-Elements auf "off" setzt:

<html>
	<head>
	</head>
	<body>
		<form action="http://127.0.0.1/blubber.htm" method="Get">
		<input name="customer" type="text" list="selection" autocomplete="off"/>(1)
		<datalist id="selection">
			<option value="1">Franziska Fischer</option>
			<option value="2">Dörde Bäcker</option>
			<option value="3">Arne Becker</option>
		</datalist>
		<button type="submit">Absenden</button>
		</form>
	</body>
</html>

Deaktiviert das aufzeichnen von Eingaben, als auch das anbieten von früheren Benutzereingaben