Hach was war ich Anfang dieser Woche guter Dinge, dass ich endlich eine native Alternative für die Autocomplete Funktion des jQueryUI Pakets gefunden habe. Ich habe so auf das HTML5 datalist Element gesetzt und schon eine funktionstüchtige Alternative mit Ajax Request fertig gehabt. Sie musste nur noch browserübergreifend getestet werden. Ich naiver Idiot hätte einfach daran denken sollen, dass Google ’s Chrome Browser die HTML5 Standards einfach am richtigsten umsetzt. Vorab: Solltet ihr auch mit dem Gedanken spielen zum jetzigen Zeitpunkt das datalist Element verwenden zu wollen – lasst es!
Aber beginnen wir einfach mal mit dem datalist Element. Das datalist Element ist ein natives HTML5 Element, welches quasi eine Vorschlagsliste darstellt. Eigentlich ist es genau der Effekt, den wir von der autocomplete Funktion des jQueryUI Pakets kennen. Man gibt etwas in ein Eingabefeld ein und schon erscheint darunter eine Liste mit Vorschlägen, aus der man das passende Element auswählen kann. Natürlich gibt ’s dafür auch ein kleines Code Beispiel.
Sieht einfach aus, oder? Ist es eigentlich auch. Sobald ich in das Textfeld etwas eingebe, welches den Vorschlägen in der Datalist entspricht, erscheinen diese als Vorschläge in einer Liste unter dem Eingabefeld. Das ist ziemlich komfortabel. Zumal die Zuordnung einfach über das list Attribut erfolgt. In einer Welt voller Regenbögen und Einhörner hätte ich hier auf jQuery und auf jQueryUI verzichten können. Ich hätte eine Menge Ballast über Bord werfen und die Seite extrem schnell machen können.
Woran scheitert das datalist Element?
Beim Testen sind dann immense Probleme aufgetreten. Mal abgesehen davon, dass man das datalist Element nicht mit CSS stylen kann, sieht es in jedem Browser unterschiedlich aus und darüber hinaus funktioniert es auch noch unterschiedlich, sofern es denn überhaupt funktioniert. Aplle schlägt sie in puncto Facepalm mal wieder alle und unterstützt dieses Element selbst in seiner aktuellsten Safari Version nicht. Was die Jungs von Apple sich dabei gedacht haben, wissen sie wahrscheinlich nicht einmal selbst.
- Der Mozilla Firefox sucht den im Textfeld eingegeben String in allen angegeben Optionen. Das ist ganz cool. Microsoft Edge und Google Chrome suchen allerdings strikt nur von Beginn der angegebenen Optionen. Das ist großer Mist. Im oben genannten Beispiel wird original gar nichts gefunden, wenn ich lediglich „cel“ eingeben würde.
- Google Chrome unterstützt das label Attribut für die Option Elemente. Das sieht im Chrome ziemlich sexy aus, da man so weitere Informationen in der Vorschlagsliste darstellen kann. Mozilla Firefox und Microsoft Edge ignorieren das label Attribut oder stellen lediglich das label Attribut als Vorschlag dar, was auch totaler Mist ist. Manchmal legt das label Attribut auch die komplette Vorschlagsliste lahm, so dass sie gar nicht angezeigt wird.
- Das Styling mittels CSS ist faktisch nicht vorhanden. Ähnlich wie bei Select Eingabefeldern besteht keine Möglichkeiten das datalist Element zu stylen. Das führt wiederum zu ziemlich hässlichen Side Effects. Der Mozilla Firefox passt die Breite der Vorschlagsliste immer dem zugeordneten Eingabefeld an. Hat man ein schmales Eingabefeld, wie z.B. für eine Postleitzahl, werden die Vorschläge nicht vollständig angezeigt. Edge und Chrome zeigen die Vorschlagsliste auch in Überbeite an. Einstellbar ist das eben nicht.
- Nicht alle type Attribute des input Elements werden unterstützt. Im Grunde genommen wird browserübergreifend nur das input Element vom Typ Text beachtet. Alles andere sollte man mit größter Vorsicht genießen.
Fazit
Es ist so unfassbar schade, dass man das datalist Element aus meiner Sicht einfach nicht produktiv einsetzen kann. Dafür gibt es zu große Unterschiede zwischen den einzelnen Browsern. Zudem setzt der Safari das Element so oder so Schach Matt. Man kann es einfach nicht nutzen, sofern man die Safari User nicht komplett ausschließen möchte. Natürlich gibt es da draußen ein paar Polyfills und Fallbacks. Aber so richtig das Gelbe vom Ei ist das alles nicht. Man kann hier nur hoffen, dass die Entwickler der verschiedenen Browser hier noch einmal nacharbeiten.
Ich muss wirklich zugeben, dass mich dieses Element dezent in den Wahnsinn getrieben hat. Ich hätte es gern genutzt. Aber ich habe auch mal wieder eine Menge gelernt. Ein praktisches Beispiel in Form eines Auto Completers für Postleitzahlen und Ortsangaben gibt es hier. Guckt Euch dieses Beispiel unbedingt in allen gängigen Browsern an. Viel Spaß damit. Den Code könnte ihr natürlich frei verwenden.