<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>

 

Online testen 

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)