Die automatische Vervollständigung ist ein Muster, mit dem alle Web-Benutzer vertraut sind. Wenn Sie eine Suche durchführen, schlägt Ihre Suchmaschine Begriffe vor. Wenn Sie eine neue E-Mail-Nachricht schreiben, schlägt Ihr Mail-Client Empfänger vor. Diese Funktionalität war jedoch für Webentwickler ohne eine nicht unerhebliche Menge an JavaScript nicht verfügbar. Eines der neuen HTML5-Elemente, das , bringt diese Autovervollständigungsfunktionalität nativ in das Web. In diesem Artikel beschreibe ich, was Datalists sind, wann es sinnvoll ist, sie zu verwenden, wo ihre Grenzen liegen und was man bei Browsern tun kann, die sie nicht unterstützen. Fangen wir an.

Erstellen von Datenlisten

Um zu zeigen, wie eine Datenliste funktioniert, lassen Sie uns mit einer traditionellen Texteingabe beginnen:

1. <label for=“favorite_team“>Favoriten-Team:</label>
2. <input type=“text“ name=“team“ id=“favorite_team“>

Dieses Feld fordert den Benutzer auf, sein Lieblingssportteam anzugeben. Standardmäßig wird dem Benutzer keine zusätzliche Hilfe zum Ausfüllen des Feldes gegeben. Durch die Verwendung einer Datenliste können Sie jedoch eine Liste von Optionen bereitstellen, aus der der Benutzer auswählen kann, um das Feld auszufüllen. Dazu definieren Sie eine Datenliste mit einem Optionselement für jeden Vorschlag:

1. <Datenliste>
2. <option>Detroit Lions</option>
3. <option>Detroit Pistons</option>
4. <option>Detroit Red Wings</option>
5. <option>Detroit Tigers</option>
6. <!- etc… ->
7. </datalist>

Um eine Datenliste an ein Eingabeelement zu binden, geben Sie dem Eingabeelement ein list-Attribut und der Datenliste ein id-Attribut, die zusammenpassen. Hier ein Beispiel:

1. <label for=“favorite_team“>Favoritenteam:</label>
2. <input type=“text“ name=“team“ id=“favorite_team“ list=“team_list“>
3. <datalist=“team_list“>
4. <option>Detroit Lions</option>
5. <option>Detroit Pistons</option>
6. <option>Detroit Red Wings</option>
7. <option>Detroit Tigers</option>
8. <!- etc… ->
9. </datalist>

Beachten Sie, dass das list-Attribut der Eingabe und das id-Attribut der datalist den gleichen Wert enthalten, „team_list“. Dies stellt die Verbindung zwischen den beiden her.

Das war’s. Es ist kein JavaScript erforderlich, um eine Datenliste zum Laufen zu bringen. Abbildung 1 zeigt, was der Benutzer in unterstützenden Browsern nach der Eingabe eines D sehen wird.

Abbildung 1. Datalist-Anzeige (oben links: Internet Explorer 10; oben rechts: Firefox 18; unten links: Chrome 24; unten rechts: Opera 12)

Hinweis: Bei Internet Explorer 10 und Opera muss der Benutzer kein Zeichen eingeben, bevor Vorschläge angezeigt werden, bei Firefox und Chrome hingegen schon.

Option-Elemente können auch ein value-Attribut haben. Dies ist nützlich, wenn ein Benutzer den Code, der mit einer bestimmten Option verbunden ist, möglicherweise nicht kennt. Betrachten Sie die folgende U.S. Staatseingabe:

1. <label for=“state“>Bundesstaat:</label>
2. <input type=“text“ name=“state“ id=“state“ list=“state_list“>
3. <datalist id=“state_list“>
4. <option value=“AL“>Alabama</option>
5. <option value=“AK“>Alaska</option>
6. <option value=“AZ“>Arizona</option>
7. <option value=“AR“>Arkansas</option>
8. <!- etc ->
9. </datalist>

Hier sieht der Benutzer eine Liste mit den vollständigen Namen der Bundesstaaten, aber wenn der Benutzer eine Auswahl trifft, wird die Texteingabe mit dem Code des Bundesstaates anstelle des vollständigen Namens gefüllt. Ein Beispiel ist in Abbildung 2 dargestellt.

Abbildung 2. Auswahl einer Datenlistenoption mit einem entsprechenden Wert (Firefox 18)

Das Autovervollständigen-Attribut

Wenn die Datenlisten in Abbildung 1 und Abbildung 2 vertraut aussehen, liegt das daran, dass die Browser schon seit langem eine Autovervollständigung implementiert haben. Alle Browser haben irgendeinen Mechanismus, um die Eingaben eines Benutzers zu speichern, damit sie später für die automatische Vervollständigung verwendet werden können.

Autoren können das Attribut autocomplete verwenden, um zu steuern, ob der Browser versuchen soll, die Daten des Benutzers automatisch zu vervollständigen. Die möglichen Werte sind im folgenden Beispiel dargestellt:

1. <form>
2. <!-
3. Wenn das Attribut autocomplete nicht angegeben ist, erbt es den Wert
4. seines übergeordneten Formularelements. Wenn nicht angegeben, ist der Standardwert des
5. Attributs „autocomplete“ des Formulars „on“. Da weder dieser Eingang noch sein
6. Formular das Attribut angegeben haben, wird der Zustand „on“ verwendet.
7. ->
8. <input type=“text“ name=“firstName“>
9. <!
10. Der Zustand „on“ zeigt an, dass der Browser sich den Wert für zukünftige
11. Verwendung merken kann und auch bereits gespeicherte Werte vorschlägt.
12. ->
13. <input type=“text“ name=“address“ autocomplete=“on“>
14. <!-
15. Der Zustand „off“ weist den Browser an, den für
16. diese Eingabe eingegebenen Wert weder zu speichern noch zuvor eingegebene Werte vorzuschlagen. Dies sollte
17. verwendet werden, wenn die Daten sensibel sind oder der Wert nie wiederverwendet werden soll.
18. ->
19. <input type=“text“ name=“secret“ autocomplete=“off“>
20. </form>

Was ist also der Unterschied zwischen dem Autocomplete-Attribut und Datenlisten? Das Autocomplete-Attribut teilt dem Browser mit, ob er dem Benutzer Optionen zur Vervollständigung basierend auf vorherigen Eingaben geben soll und ob er den eingegebenen Wert für zukünftige Vervollständigungen speichern soll. Datenlisten sind vom Autor bereitgestellte Listen mit Vorschlägen, die immer angezeigt werden, unabhängig von der vorherigen Eingabe.

Eine Einschränkung ist, dass das Setzen des Attributs autocomplete auf „off“ verhindert, dass Datenlisten in Opera angezeigt werden. Hier ein Beispiel:

1. <!-
2. Diese Datenliste wird in Opera nie angezeigt, da das Attribut „Autovervollständigen“ auf „aus“ gesetzt ist
3. . Sie wird in allen anderen unterstützenden Browsern angezeigt.
4. ->
5. <input type=“text“ list=“pets“ autocomplete=“off“>
6. <datalist id=“pets“>
7. <option>Katze</option>
8. <option>Hund</option>
9. <option>Hamster</option>
10. <option>Schildkröte</option>
11. </datalist>

Andere Eingabearten

Während die Autovervollständigung traditionell mit textuellen Eingaben verbunden ist, können Datenlisten auch bei einer Reihe der neuen HTML5-Eingabetypen verwendet werden. Betrachten Sie den Range-Input-Typ, der die Erstellung eines Slider-Formular-Elements ermöglicht. Durch die Kombination mit einer Datenliste können Sie dem Benutzer Punkte auf dem Bereich vorschlagen.

Beispielsweise bittet die folgende Eingabe den Benutzer, eine Spende zwischen 5 und 200 Dollar anzugeben.

1. <label for=“donation“>Spendenbetrag (USD):</label>
2. <input type=“range“ name=“donation“ id=“donation“ list=“donation_list“
3. step=“5″ min=“5″ max=“200″>
4. <datalist id=“donation_list“>
5. <option></option>
6. <option></option>
7. <option></option>
8. <option></option>
9. </datalist>

Abbildung 3 und Abbildung 4 zeigen die Darstellung einer Bereichseingabe in Chrome 24 und Internet Explorer 10, beziehungsweise.

Abbildung 3. Bereichseingabe mit Datenliste (Chrome 24)

Abbildung 4. Bereichseingabe mit Datenliste (Internet Explorer 10)

Sie können sehen, dass jeder Browser ein Häkchen für jede angebotene Datenlistenoption anzeigt. Zusätzlich rastet Chrome den Schieberegler an diesen vordefinierten Werten ein, wenn der Benutzer den Schieberegler in deren Nähe bewegt.

Leider sind Internet Explorer und Chrome die einzigen Browser, die derzeit Datenlisten bei Bereichseingaben unterstützen. Abbildung 5 zeigt die Unterstützung von Datenlisten auf gängigen Eingabetypen in modernen Browsern.

Abbildung 5. Browser-Unterstützung von Datenlisten bei Formulareingabe-Typen

Wann eine Datenliste verwenden

Da Datenlisten keinen eingebauten Mechanismus haben, der verlangt, dass der Benutzer eine vorgegebene Option auswählt, eignen sie sich gut für Eingaben, die jeden Wert annehmen können. Das frühere Beispiel der Angabe einer Sportmannschaft passt hier. Die Datenliste schlug zwar Mannschaften vor, aber der Benutzer konnte jeden beliebigen Wert eingeben.

Das Beispiel mit den US-Bundesstaaten hingegen scheitert an diesem Test, weil es eine begrenzte Menge gültiger Werte gibt, die der Benutzer angeben muss. Ein solcher Anwendungsfall wird besser durch das select-Element behandelt, da es eine Auswahl erzwingt.

Eine Ausnahme bilden Eingaben mit einer großen Anzahl gültiger Auswahlmöglichkeiten. Betrachten Sie zum Beispiel die traditionelle Länder-Drop-Down-Liste in Abbildung 6.

Abbildung 6. Standard-Länder-Drop-Down

Diese Liste behindert den Benutzer, da er gezwungen ist, sich durch Hunderte von Optionen zu wühlen, um die gesuchte zu finden. Eine Autovervollständigungsfunktion passt gut zu diesem Anwendungsfall, weil ein Benutzer die Liste schnell filtern kann, indem er ein oder zwei Zeichen eingibt.

Hier ist, wie die Länderauswahl mit einer Datenliste implementiert werden kann:

1. <label for=“country“>Country:</label>
2. <input type=“text“ id=“country“ list=“country_list“>
3. <datalist id=“country_list“>
4. <option value=“AF“>Afghanistan</option>
5. <option value=“AX“>Åland Inseln</option>
6. <option value=“AL“>Albanien</option>
7. <option value=“DZ“>Algerien</option>
8. <!- mehr ->
9. </datalist>

Abbildung 7 zeigt, was der Benutzer nach Eingabe eines U sieht.

Abbildung 7. Ein Datalist-Ansatz für das Formularfeld „Land“

Erzwingen eines Wertes

Während Datalists von Haus aus nicht erlauben, dass eine Option ausgewählt werden muss, können Sie leicht eine Validierung hinzufügen, die dies tut. Der folgende Code nutzt beispielsweise die HTML5-API zur Validierung von Einschränkungen, um eine solche Validierung hinzuzufügen:

1. // Finde alle Eingaben im DOM, die über ihr Listenattribut an eine Datenliste gebunden sind.
2. var inputs = document.querySelectorAll(‚input‘);
3. for (var i = 0; i < inputs.length; i++) {
4. // Wenn sich der Wert der Eingabe ändert…
5. inputs.addEventListener(‚change‘, function() {
6. var optionFound = false,
7. datalist = this.list;
8. // Ermitteln, ob eine Option mit dem aktuellen Wert der Eingabe existiert,
9. for (var j = 0; j < datalist.options.length; j++) {
10. if (this.value == datalist.options.value) {
11. optionFound = true;
12. break;
13. }
14. }
15. // verwenden Sie die Funktion setCustomValidity der Validation API
16. // um dem Benutzer eine Rückmeldung zu geben, wenn der Wert nicht in der Datenliste vorhanden ist
17. if (optionFound) {
18. this.setCustomValidity(„);
19. } else {
20. this.setCustomValidity(‚Bitte wählen Sie einen gültigen Wert aus.‘);
21. }
22. });
23. });
24. }

Die Constraint-Validierungs-API ist in allen Browsern implementiert, die Datenlisten unterstützen, wenn also die Datenliste funktioniert, sollte auch die Validierung funktionieren. Wenn der Benutzer nun versucht, ein Formular mit einer Eingabe abzuschicken, die eine Datenliste enthält (und er keine Option ausgewählt hat), wird er den in Abbildung 8 gezeigten Fehler sehen.

Abbildung 8. Constraint Validation API-Fehler (Internet Explorer 10)

Es ist wichtig zu beachten, dass die Constraint Validation API die Notwendigkeit einer serverseitigen Validierung nicht beseitigt. Benutzer, die mit älteren Browsern arbeiten, haben die Einschränkungsüberprüfungs-API nicht zur Verfügung, und böswillige Benutzer können clientseitige Skripte leicht unterwandern.

Während dieser Ansatz in modernen Browsern funktioniert, stellt er für Benutzer mit Browsern ohne Unterstützung eine unbrauchbare Benutzeroberfläche dar. Den Benutzern wird gesagt, dass sie einen gültigen Wert auswählen müssen, aber wenn ihr Browser keine Datenlisten unterstützt, können sie die Optionen nicht sehen. Wenn Sie also planen, diesen Ansatz zu verwenden, ist es wichtig, eine Benutzeroberfläche bereitzustellen, die in allen Browsern funktioniert. Dies kann erreicht werden, indem man erkennt, ob der Browser Datalisten unterstützt und dann entsprechend füllt.

Nicht unterstützende Browser

Zum Zeitpunkt dieses Schreibens werden Datalisten für Texteingaben in Internet Explorer 10, Firefox 4+, Chrome 20+ und Opera unterstützt, was leider eine große Anzahl von Benutzern ausschließt.

Wie bei vielen neuen HTML5-Funktionen muss für die meisten Anwendungsfälle keine zusätzliche Arbeit in Browsern geleistet werden, die keine Datalisten unterstützen. Standardmäßig sind die angebotenen Optionen nur Vorschläge; daher müssen Benutzer mit Browsern, die keine Unterstützung bieten, das Textfeld einfach ohne Vorschläge ausfüllen.

Es können jedoch einige Fallback-Optionen verwendet werden, um Benutzern mit nicht unterstützenden Browsern ein umfassenderes Erlebnis zu bieten.

Fallback zu alternativem HTML-Inhalt

Eine Option, die von Jeremy Keith populär gemacht wurde, besteht darin, die Tatsache auszunutzen, dass Browser, die das datalist-Element nicht unterstützen, dem Benutzer trotzdem Kindelemente anzeigen. Im Folgenden wird gezeigt, wie das Beispiel der Datalist für das Land geändert werden kann und auf die Verwendung von <select> zurückgegriffen wird:

1. <label for=“country“>Country:</label>
2. <datalist id=“country_list“>
3. <select name=“country“>
4. <option value=“AF“>Afghanistan</option>
5. <option value=“AX“>Åland Inseln</option>
6. <option value=“AL“>Albanien</option>
7. <option value=“DZ“>Algerien</option>
8. <option value=“AS“>Amerikanisch-Samoa</option>
9. <!- mehr ->
10. </select>
11. Wenn andere, bitte angeben:
12. </datalist>
13. <input type=“text“ name=“country“ id=“country“ list=“country_list“>

Das UI für Benutzer in Browsern, die Datenlisten unterstützen, wird sich nicht ändern, aber Benutzer, die mit Browsern ohne Unterstützung arbeiten, sehen jetzt ein Auswahlelement mit den Länderoptionen und ein Textfeld, in das sie einen beliebigen Wert eingeben können. Dies ist in Abbildung 9 dargestellt.

Abbildung 9: Ein Select-Fallback für Datenlisten (Internet Explorer 9)

Polyfilling

Eine Funktion, die der Select-Fallback nicht bietet, ist das Autocomplete-Verhalten, das Datenlisten nativ bieten. Wenn das für die Datenlisten, die Sie hinzufügen, wichtig ist, besteht eine zweite Fallback-Option darin, eine Datenlisten-Implementierung mit Polyfill zu versehen.

Zu Beginn müssen Sie zunächst feststellen, ob der Browser des Benutzers Datenlisten unterstützt. Die beliebte Funktionserkennungsbibliothek Modernizr bietet einen solchen Test, wie hier gezeigt:

1. if (Modernizr.input.list) {
2. //Der Browser unterstützt das Listenattribut und Datalisten.
3. } else {
4. //Der Browser unterstützt weder das List-Attribut noch Datenlisten.
5. }
6. }

Mit diesem Ansatz können Sie nun eine Datenlisten-Implementierung für Benutzer in nicht unterstützenden Browsern polyfillen. Obwohl mehrere Polyfills für Datenlisten verfügbar sind, bevorzuge ich die Verwendung des Autocomplete-Widgets von jQuery UI. Der folgende Code zeigt eine Polyfill-Implementierung:

1. var datalist,
2. listAttribute,
3. options = ;
4. /// Wenn der Browser das list-Attribut nicht unterstützt…
5. if (!Modernizr.input.list) {
6. // Für jede Texteingabe mit einem Listenattribut…
7. $(‚input‘).each(function() {
8. // Finden Sie die ID der Datenliste auf der Eingabe
9. // Finden Sie damit die Datenliste, die der Eingabe entspricht.
10. listAttribute = $(this).attr(‚list‘);
11. datalist = $(‚#‘ + listAttribute);
12. // Wenn die Eingabe ein entsprechendes datalist-Element hat…
13. if (datalist.length > 0) {
14. Optionen = ;
15. // Erstellen Sie die Liste der Optionen, die an das Autovervollständigen-Widget übergeben werden sollen.
16. datalist.find(‚option‘).each(function() {
17. options.push({ label: this.innerHTML, value: this.value });
18. });
19. // Die Eingabe in ein jQuery UI Autocomplete-Widget verwandeln.
20. $(this).autocomplete({ source: options });
21. }
22. });
23. // Alle Datenlisten aus dem DOM entfernen, damit sie nicht angezeigt werden.
24. $(‚datalist‘).remove();
25. }

Abbildung 10 zeigt die Anzeige des Länderlisten-Beispiels in Safari mit dem Autovervollständigungs-Polyfill von jQuery UI.

Abbildung 10. Mit dem Autovervollständigen-Widget von jQuery UI ausgefüllte Länderdatenliste (Safari)

Sie haben vielleicht bemerkt, dass das Autovervollständigen-Widget von jQuery UI standardmäßig Zeichen an beliebiger Stelle in den Optionen abgleicht, während Datenlisten Optionen nur am Anfang des Strings abgleichen. Im Gegensatz zur nativen Datenliste können Sie das Autovervollständigen-Widget so anpassen, dass es die Optionen so abgleicht, wie Sie es möchten.

Das folgende Beispiel zeigt, wie Sie eine Autovervollständigungsfunktion erstellen können, die Optionen nur am Anfang der Zeichenfolge abgleicht:

1. <input type=“text“ id=“autocomplete“>
2. <script>
3. var options = ;
4. $(‚#autocomplete‘).autocomplete({
5. // req wird ein Objekt mit einer „term“-Eigenschaft enthalten, die den Wert
6. // aktuell in der Texteingabe enthält. responseFn sollte mit den Optionen
7. // aufgerufen werden, um sie dem Benutzer anzuzeigen.
8. source: function (req, responseFn) {
9. // Escape alle RegExp-Bedeutungszeichen wie „.“ oder „^“ aus dem
10. // eingegebenen Begriff.
11. var term = $.ui.autocomplete.escapeRegex(req.term),
12. // ‚^‘ ist das RegExp-Zeichen, das am Anfang der Zeichenkette übereinstimmen soll.
13. // ‚i‘ sagt dem RegExp, dass es eine Übereinstimmung ohne Berücksichtigung der Groß-/Kleinschreibung durchführen soll.
14. matcher = new RegExp(‚^‘ + term, ‚i‘),
15. // Schleife über die Optionen und wählt nur die aus, die mit dem RegExp übereinstimmen.
16. matches = $.grep(options, function (item) {
17. return matcher.test(item);
18. });
19. // Rückgabe der übereinstimmenden Optionen.
20. responseFn(matches);
21. }
22. });
23. </script>

Ältere Versionen des Internet Explorers

Damit ein Polyfill des Datalist-Elements auch in älteren Versionen des Internet Explorers funktioniert, müssen Sie zwei zusätzliche Schritte durchführen.

Optionselemente

Der erste ist, dass Internet Explorer Version 9 und früher alle erfordern, dass Optionselemente direkte Kinder von Select-Elementen sind. Wenn dies nicht der Fall ist, werden sie von diesen Versionen nicht erkannt und sind für das Polyfill nicht sichtbar.

Glücklicherweise lässt sich dies leicht umgehen. Durch die Verwendung von bedingten Kommentaren können Sie ein Select-Element um die Optionen nur für diese Versionen des Internet Explorers platzieren. Siehe dieses Beispiel:

1. <datalist>
2. <><select><<>
3. <Option>Apple</option>
4. <option>Banane</option>
5. <option>Kirsche</option>
6. <!- etc ->
7. <><select><<>
8. </datalist>

Internet Explorer Version 9 und früher erkennen die Optionen nun entsprechend. Internet Explorer 10 ist davon nicht betroffen, da bedingte Kommentare im Internet Explorer 10 aus dem Parser entfernt wurden. Alle anderen Browser werden die Kommentare ebenfalls ignorieren.

HTML5 Shiv

Im Internet Explorer Version 8 und früher können unbekannte Elemente keine Kinder enthalten. Daher werden die Optionselemente einer Datenliste, selbst wenn sie sich innerhalb von Select-Elementen befinden, nicht erkannt.

Glücklicherweise gibt es auch für dieses Problem eine einfache Lösung. Die beliebte HTML5-Shiv-Bibliothek erlaubt es Elementen, die dem Internet Explorer 6-8 unbekannt sind, Kinder zu haben. Diese Shiv ist standardmäßig in Modernizr enthalten; vergewissern Sie sich einfach, dass das Kontrollkästchen „html5shiv“ aktiviert ist, wenn Sie Ihren Download konfigurieren.

Einschränkungen von Datenlisten

Obwohl sich Datenlisten perfekt für das Hinzufügen von Vorschlägen zu Texteingaben eignen, leiden sie unter einem Mangel an Anpassungsmöglichkeiten, die viele moderne Webanwendungen benötigen. Zum Beispiel können Sie mit Datenlisten Folgendes nicht tun:

• Verwenden Sie CSS, um die Darstellung oder die Anzeige der Optionen zu ändern.
• Steuern Sie die Positionierung der Liste.
• Steuern Sie die Anzahl der eingegebenen Zeichen, bevor der Browser dem Benutzer Ergebnisse anzeigt.
• Steuern Sie, was als Übereinstimmung gewertet wird (Groß-/Kleinschreibung, Übereinstimmung am Anfang der Zeichenkette vs. an beliebiger Stelle usw.).
• Binden Sie die Eingabe an eine serverseitige Datenquelle.

Das bedeutet, dass Sie, wenn Sie eine dieser Funktionen benötigen, eine robustere Autovervollständigungslösung in Betracht ziehen müssen. Das jQuery UI-Autocomplete-Widget bietet die Möglichkeit, all dies und mehr zu tun. Das Autovervollständigen-Widget unterstützt außerdem alle Browser bis zurück zu Internet Explorer 7, ohne dass ein Polyfill erforderlich ist. Weitere Informationen über das Autovervollständigen-Widget finden Sie in den Demos und der API-Dokumentation. (Das Autovervollständigen-Widget verarbeitet nur textbasierte Eingaben, daher kann es Ihnen bei einigen spezielleren Eingabetypen wie Bereich und Farbe nicht helfen.)

Zusammenfassung

Datalisten bieten eine schnelle, native Möglichkeit, dem Benutzer Eingabevorschläge anzuzeigen. Da es sich bei den Optionen lediglich um Vorschläge handelt, ist es in vielen Situationen nicht notwendig, einen Fallback für nicht unterstützende Browser bereitzustellen; Benutzer dieser Browser sehen die Vorschläge einfach nicht.

Für Situationen, in denen Sie allen Benutzern eine funktionale Datenliste zur Verfügung stellen möchten, können Sie die Unterstützung erkennen und die Funktionalität für Browser mit fehlender Unterstützung polyfillen.

Während Datenlisten großartig sind, um Vorschläge anzubieten, sind sie in ihrer Funktionalität begrenzt. Wenn Sie eine robustere Autovervollständigungslösung benötigen, ist das Autovervollständigungs-Widget von jQuery UI ein guter Ausgangspunkt.