HTML5 Datalist Element mit asynchronem Javascript Request
Das <datalist> Element wurde mit HTML5 eingeführt und bietet die Möglichkeit Autovervollständigungen / Vorschlagslisten auf einem nativen Weg zu realisieren. Folgendes Beispiel zeigt, wie eine Abfrage eines Ortes mit Postleitzahl mit dem <datalist> Element funktionieren kann. Auf dem Eingabefeld liegt ein keyup Event Listener und führt, sobald die Länge des eingegebenen Strings zwei Zeichen überschreitet, einen AJAX Request aus und fügt dynamisch Option Elemente in das Datalist Element ein.
Wieso sind <datalist> Elemente nicht anwendbar?
- Das Element kann nicht mit CSS gestylt werden
- Aktuelle Browser wenden das Element unterschiedlich an. Während Mozilla Firefox das eingegebene Stichwort auch mitten im String sucht, finden Google Chrome und Microsoft Edge keine Vorschläge, da das angegebene Stichwort lediglich von Beginn der vorhandenen Datalist Optionen matchen muss.
Beispiel: Einfach mal einen Ort als Suchwort eingeben. Firefox gibt Vorschläge an. Chrome und Edge finden nichts. - Google 's Chrome Browser unterstützt das label-Attribut für das Option Element und stellt die Vorschläge am besten dar (einfach mal dieses Beispiel hier im Chrome Browser aufrufen). Sofern das label-Attribut in anderen Browsern mit angegeben wird, kann es dazu führen, dass die Vorschlagsliste nicht angezeigt wird.
- Apple 's Safari Browser unterstützt das Element zum aktuellen Zeitpunkt gar nicht