Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5: Eingabefeld mit Vorschlägen als Dropdownliste

Eingabefelder von Formularen werden gerne mit einer Dropdownliste ausgestattet, in der Vorschläge für Benutzereingaben gemacht werden. Gerade Suchmaschinen und soziale Netzwerke schlagen auf diese Weise gesuchte Begriffe oder Personen vor. Mit HTML5 lässt sich eine solche Dropdownliste einfach und ohne JavaScript realisieren.

HTML5 und das DATALIST-Element

Mit dem neuen DATALIST-Element lassen sich Begriffe festlegen, die bei entsprechender Eingabe als Vorschläge gezeigt werden sollen. Die einzelnen Begriffe, die vorgeschlagen werden sollen, werden über das OPTION-Element definiert:

<input type="text" name="laender" list="laender">
  <datalist id="laender">
    <option value="Baden-Württemberg" />
    <option value="Bayern" />
    <option value="Berlin" />
    …
  </datalist>
</input>

Das DATALIST-Element muss nicht zwingen Kindelement eines INPUT-Elementes sein. Es kann auch außerhalb stehen. Über die Eigenschaft „list“ wird dem INPUT-Element die ID der Liste mitgeteilt. Es ist also auch möglich, eine Dropdownliste für mehrere Eingabefelder zu nutzen.

HTML5: Dropdownlist nur mit DATALIST-Vorschlägen (links) und zusätzlich mit im Browser gespeicherten Eingaben (rechts)
HTML5: Dropdownlist nur mit DATALIST-Vorschlägen (links) und zusätzlich mit im Browser gespeicherten Eingaben (rechts)

Wird zweimal das jeweilige Eingabefeld angeklickt, erscheint die komplette Vorschlagsliste als Dropdown. Wird ein „B“ eingegeben, erscheinen nur noch die Vorschläge, die mit „B“ beginnen.

Hat der Browser für das Eingabefeld seinerseits Benutzereingaben gespeichert, werden diese ebenfalls in der Dropdownliste dargestellt. In diesem Fall ist die Liste zweigeteilt. Zuerst werden die im Browser gespeicherten Eingaben gelistet, anschließend die im Formular definierten Vorschläge. Beides wird durch eine Linie voneinander getrennt.

Unterstützung durch Browser

Derzeit unterstützen nur Firefox und Opera das DATALIST-Element. Allerdings lässt sich mit jQuery und Modernizr die Dropdownliste auch in anderen Browsern funktionsfähig machen. Bei Modernizr handelt es sich um eine JavaScript-Bibliothek, die Fallbacks für HTML5-Funktionen bereitstellt. So können auch ältere Browser HTML5-Funktionen nutzen – wenn auch über den Umweg einer JavaScript-Bibliothek.

Was haltet ihr von dem DATALIST-Element? Setzt ihr es ein und wenn ja, wofür nutzt ihr es?

Weitereführende Links zum Thema HTML5:

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
Denis Potschien

@Dirk: Natürlich kann Modernizr allein nicht dafür sorgen, dass DATALIST auch in anderen Browsern läuft. Mit einem entsprechenden jQuery-Plugin funktioniert es.

Antworten
Daniel

Hmm auf der anderen Seite aber auch nicht so schön, dass bei Eingabe eines einzelnen Buchstaben alle Wörter angezeigt werden die auch den selben beinhalten, egal ob Anfangsbuchstabe oder nicht. Aber an sich super, dass es gleich »von Haus aus« so ein implementiertes Feature gibt.

Antworten
alexander farkas

@Guido
Dir ist aber auch klar, dass du nicht nur datalist elemente, sondern auch die darin befindlichen option, dynamisch erstellen / ändern kannst?

Antworten
Dirk Jesse

@Guido
Innerhalb einer Webapplikation sind datalist-Elemente nicht nur "ganz nett", sondern eine wirklich super-einfach zu implementierende Methode für eine Autocomplete-Funktionalität, wobei die Trefferlisten sinnvollerweise dynamisch erzeugt werden sollten.

Antworten
abogomolov

@Guido: Dein letzter Satz ist leider auch nicht ganz richtig. Der User kann ja immer noch irgendwas anderes da rein schreiben. Es bietet lediglich Vorschläge, zwingt diese aber nicht auf.

Antworten
Guido

Das klingt ja soweit ganz nett und ist für kleine Listen, z.B. Bundesländer, sicher geeignet. Aber bei einer großen Liste sorgten man eben auch für aufgeblähten Quellcode. Da würde ich dann doch eher auf eine AJAX Abfrage setzen. Von Fall zu Fall muss man sich das wohl gründlich überlegen.

Ansonsten eine chique Alternative zu den Selectboxen.

Antworten
Dirk Jesse

Auch zu diesem Beitrag ein höflicher Korrekturhinweis. Mit Modernizr lässt sich zwar per Feature-Detection ermitteln, ob ein Browser das datalist-Element unterstützt oder nicht. Die Funktionalität wird jedoch erst mit einem passenden Polyfill nachgerüstet, wofür Modernizr zwar eine Ladefunktion anbietet, aber der Polyfill selbst (z.B. die Webshims-Lib von Alexander Farkas, die auch einen datalist-Polyfill beinhaltet), hat mit Modernizr nichts zu tun. Modernizer wird in diesem Fall streng genommen gar nicht benötigt. Einfach nur Modernizr auf das Problem werfen, reicht jedoch nicht.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.