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)

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:

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

60 Kommentare
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
Guido
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
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
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
alexander farkas
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
Daniel
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
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

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung