<datalist> Tag - Autovervollständigung für Listen
Beispiel, Eingabe von Städten mit vordefinierten Listenwerten:
<form action="#" method="get">
<input list="staedte" name="staedte">
<datalist id="staedte">
<option value="Kaufbeuren">
<option value="Lübben">
<option value="Berlin">
<option value="Obergünzburg">
<option value="Hamburg">
<option value="Leipzig">
</datalist>
<input type="submit">
</form>
Verwendung
Mit dem datalist
Tag können Sie eine Autovervollständigung für Eingabefelder realisieren. Die Liste enthält Werte, welche bei der Eingabe in das Eingabefeld automatisch
autovervollständigt werden. Der Benutzer sieht bei der Eingabe eine Auswahlliste, aus dieser kann er einen Wert auswählen, welcher übernommen werden kann. Trotzdem kann er auch freie Werte
eingeben. Um ein Eingabefeld mit einer Liste zu verbinden, wird diese im list
Attribut angegeben.
Der Tag wird von älteren Browsern wie dem Internet Explorer 9 nicht unterstützt.
Darstellung (Screenshot)