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.
