24. Juli 2023

Autocomplete oder Autosuggest in einem Formularfeld ohne JavaScript

Das einem bei der Eingabe eines Suchbegriffs oder einer Adresse bereits Begriffe vorgeschlagen werden ist heute völlig normal. Dieses Verhalten zu programmieren ist häufig allerdings doch recht aufwändig.

Tatsächlich gibt es aber eine Möglichkeit ein Formularfeld mit Autocomplete-Funktion mit reinem HTML – ohne JavaScript – umzusetzen: Mit einer „datalist“.

<input list="eissorten" id="eissorte" name="eissorte">
<datalist id="eissorten">
    <option value="Schokolade">
    <option value="Kokos">
    <option value="Zitrone">
    <option value="Erdbeere">
    <option value="Vanille">
    <option value="Mango">
</datalist>Code-Sprache: HTML, XML (xml)

In das Input-Feld lässt sich, anders als bei einem Dropdown, frei ausfüllen. Dabei werden einem aber die Begriffe aus der Datalist vorgeschlagen.

Eissorte

Klar, es gibt schickere Autocomplete-Umsetzungen – diese hier ist aber unschlagbar einfach umzusetzen.