HTML5 - Erklärung der Autovervollständigung

Autovervollständigung mit HTML5

Eingabefelder bestimmen maßgeblich die Erfahrungen, die ein Nutzer mit einer Webseite macht. Wenn ich nach einem erfolgreichem Interneteinkauf zur Kasse gehe, erwarte ich, dass das Eingabefeld mir Vorschläge für mein Land liefert, sobald ich ein „D“ eintippe. Dies war bisher nur durch Javascript möglich, doch das Element <datalist> ermöglicht es schnell vordefinierte Listen einzubinden.

Einsatz

Gerade die Auswahl des Heimatlandes in einem Formular kann bei einer internationalen Seite schnell zu viel werden. Um zu verhindern, dass dem Nutzer die Finger vom Scrollen verkrampfen, sollten Webentwickler zur Autovervollständigung greifen. Und das geht einfacher als je zuvor.

Paul entwickelt eine kleine Homepage für sich und seine Freunde. Er will, dass sich alle anmelden können und dabei ein Profil ausfüllen. Auch der Lieblingsverein soll Teil dieses Profils sein. Aber da Paul weiß, dass seine Freunde manchmal faul sein können, will er eine Autovervollständigung im Anmeldeformular integrieren.

Listen erstellen

Grundlage der Autovervollständigung ist natürlich eine Liste in der alle Werte eingetragen werden, die abgedeckt werden sollen. Paul legt also los und schreibt einige Vereine auf, die seine Freunde mögen.

Einbindung

Jetzt braucht Paul nur noch ein Auswahlfeld, in dem seine Freunde den Eintrag machen können.

Aber wie kann das Eingabefeld auf die Liste zugreifen? Dem <input>-Element muss das Attribut list zugeordnet werden, zum Beispiel mit dem Namen „vereinsliste“. Das <datalist>-Element bekommt eine ID mit dem Namen des list-Attributs. Pauls Code sieht jetzt so aus:

Wenn Pauls Freunde nun etwas eingeben, erhalten sie eine Auswahl der Möglichkeiten. Oder bei einem Klick in das bereits ausgewählte Feld die gesamten Auswahlmöglichkeiten.

Autovervollständigung

Möglichkeiten

Alle gängigen Browser bis auf Safari unterstützen das neue Element <datalist>, welches leicht verständlich daher kommt. Aber nicht nur Texteingabefelder lassen sich komfortabler gestalten.

Paul startet eine Umfrage unter seinen Freunden, da er eine Party plant. Er möchte wissen, wie viel Bier er besorgen muss, und da Eingabefelder auf die Dauer langweilig werden entscheidet er sich für einen Schieberegler. In einem Kasten sind 24 Flaschen, also möchte Peter seinen Freunden die Auswahl erleichtern, indem er 6er Schritte vorgibt.

Der Schieberegler ist fertig und bereit für den Einsatz. Und das ganz ohne Javascript. Okay, Paul möchte, dass seine Freunde rechts neben dem Regler sehen, wie viel Bier sie ausgewählt haben, und nutzt ein kleines Script. Die Autovervollständigung mit HTML5 liefert aber auch ohne Zusätze ansehnliche Ergebnisse, die nur darauf warten verfeinert zu werden!

Autovervollständigung Range

Kommentare

  1. Tom am

    Hallo,

    dieser Beitrag hier hat mir sehr geholfen, eine solche Funktion ist durchaus sehr praktisch.

    Ich habe jedoch noch eine Frage, und zwar würde ich gerne wissen wollen, ob es auch möglich ist, dass man, wenn nur noch ein Eintrag aus der Liste den gemachten Eingaben entspricht, diesen mit Enter auswählt, also nicht mehr die Maus dorthin bewegen muss?

    Danke

    Antworten
    1. Nadja Krakow am

      Hi Tom,
      das ist möglich. Generell können alle Beiträge auch über die Tastatur ausgewählt werden, indem man diese mit den Pfeiltasten durchschaltet, die Bestätigung erfolgt mit Enter.
      Den letzten verbliebenen Eintrag kann man nicht mit Enter allein auswählen, sondern muss auch hier erst eine Auswahl über die Pfeiltasten (nach unten) treffen.

      Viele Grüße
      Nadja

      Antworten

Kommentar hinzufügen

    Hilfe & Kontakt

    Support-Hotline
    +49 (0) 800/440-3000

    E-Mail
    support@mittwald.de