Das datalist-Tag

Das Tag datalist erstellt eine Autovervollständigung für input-Eingabefelder in HTML-Formularen.

Das Prinzip der Autovervollständigung: Wenn der Benutzer versucht, etwas in das Eingabefeld einzugeben, erscheint unten ein aufklappender Hinweis, der eine Liste der verfügbaren Auswahloptionen darstellt. Der Benutzer kann eine der vorgeschlagenen Optionen auswählen, ohne sie vollständig eingeben zu müssen.

Um einem input-Tag eine Autovervollständigung zuzuordnen, muss ihm das Attribut list zugewiesen werden, in dem das id-Attribut des zugehörigen datalist-Tags angegeben werden muss.

Die Auswahloptionen werden in option-Tags gespeichert, die sich wiederum im datalist-Tag befinden.

Beispiel

Geben wir ein Land in das Eingabefeld ein. Geben wir zunächst den Buchstaben 'b' ein - und sehen einen aufklappenden Hinweis mit drei Ländern. Geben wir dann noch den Buchstaben 'e' ein - verringert sich die Anzahl der vorgeschlagenen Länder auf zwei:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Beispiel

Fügen wir nun dem option-Tag das Attribut value hinzu. Bei der Auswahl eines bestimmten Landes wird nicht der Landesname in das zugehörige Input-Feld übernommen, sondern der Inhalt des value-Attributs:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Beispiel . Einfluss des autocomplete-Attributs

Die Dropdown-Liste mit Vorschlägen wird vom Attribut autocomplete beeinflusst. Wenn es aktiviert ist (was standardmäßig der Fall ist), werden zu den Werten, die Sie im datalist-Tag angegeben haben, auch die Werte hinzugefügt, die der Benutzer zuvor in dieses Feld eingegeben hat.

Geben Sie 'Brazil' in das Feld ein und klicken Sie auf den Absendeknopf (ohne Absendeaktion merkt sich der Browser dieses Land nicht). Kehren Sie dann zu diesem Beispiel zurück und geben Sie den Buchstaben 'b' ein - in der erscheinenden Liste sehen Sie nicht nur 3 Länder aus dem datalist, sondern auch das zuvor eingegebene Land (außerdem, wenn Sie dasselbe mit dem Wort 'Belarus' machen - erscheint dieser Wert in der Dropdown-Liste zweimal).

Wenn Sie dies stört - deaktivieren Sie das Attribut autocomplete, indem Sie ihm den Wert off zuweisen.

Führen Sie die oben beschriebenen Manipulationen mit dem Beispiel durch:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Siehe auch

das Attribut autocomplete,
das die Autovervollständigung für Formularfelder festlegt