HTML Dropdown Autovervollständigung

HTML Dropdowns sind eine feine Sache, allerdings ist das Thema Autovervollständigung ein Thema, welches anschliessend viel JavaScript Code erzeugt und teilweise sehr frustrierend sein kann. Doch das muss nicht sein, HTML Unterstützt dieses Feature von Haus aus!Mit dem HTML Tag <datalist> kann ein Dropdown erstellt werden, welches eine Autovervollständigung anbietet. Hier ein einfaches Beispiel für die Auswahl von verschiedene Namen.

Zuerst definieren wir ein Input Feld, welches auf die ID der datalist zeigt. In diesem Input Field wird die Liste anschliessend dargestellt.

<input list="names" />

<datalist id="names">
   <option>Tom</option>
   <option>Hans</option>
   <option>Marco</option>
   <option>Angela</option>
   <option>Joel</option>
</datalist>

JTNDcCUzRVVuZCUyMHNvJTIwc2llaHQlMjBkaWVzJTIwYW5zY2hsaWVzc2VuZCUyMGltJTIwQnJvd3NlciUyMGF1cyUzQSUzQyUyRnAlM0UlMEElM0NpbnB1dCUyMGxpc3QlM0QlMjJuYW1lcyUyMiUyMCUyRiUzRSUwQSUzQ2RhdGFsaXN0JTIwaWQlM0QlMjJuYW1lcyUyMiUzRSUwQSUzQ29wdGlvbiUzRVRvbSUzQyUyRm9wdGlvbiUzRSUwQSUzQ29wdGlvbiUzRUhhbnMlM0MlMkZvcHRpb24lM0UlMEElM0NvcHRpb24lM0VNYXJjbyUzQyUyRm9wdGlvbiUzRSUwQSUzQ29wdGlvbiUzRUFuZ2VsYSUzQyUyRm9wdGlvbiUzRSUwQSUzQ29wdGlvbiUzRUpvZWwlM0MlMkZvcHRpb24lM0UlM0MlMkZkYXRhbGlzdCUzRQ==Dieses tolle Feature ist allerdings mit Vorsicht zu geniessen. Nicht alle Browser unterstützen es, wie wir auf der Seite caniuse.com entnehmen können.


Keine Beiträge verpassen?


War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 2 )
Passende Themen
Kommentare (2)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.