Datalist für die automatische Vervollständigung
Schlagen Sie Eingabewerte mit dem datalist-Element vor
Datalist für die automatische Vervollständigung ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist datalist?
Das <datalist>-Element stellt eine Liste vordefinierter Vorschläge für ein <input>-Element bereit:
<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->datalist im Vergleich zu select
Der entscheidende Unterschied zwischen <datalist> und <select>:
- datalist – freier Text plus Vorschläge; Benutzer können beliebige Eingaben machen
- select – eingeschränkte Auswahl; Benutzer müssen einen Eintrag aus der Liste auswählen
Verwenden Sie datalist, wenn Sie Werte vorschlagen, die Eingabe aber nicht einschränken möchten.
datalist mit input verknüpfen
Das list-Attribut von <input> muss mit der id des <datalist>-Elements übereinstimmen:
<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>datalist mit verschiedenen input-Typen
<datalist> funktioniert mit vielen input-Typen:
<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">
<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
<option value="0"> <option value="25">
<option value="50"> <option value="75"> <option value="100">
</datalist>
<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
<option value="#0070f3">
<option value="#e86f00">
</datalist>option label in datalist
Optionen in datalist können ein sichtbares label und einen übermittelten value-Wert enthalten:
<datalist id="countries">
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
<option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
value is submitted when the option is selected -->Vorschläge filtern
Der Browser filtert die Vorschläge, während der Benutzer tippt:
- Der Abgleichalgorithmus unterscheidet sich je nach Browser
- Manche Browser suchen vom Anfang an, andere an beliebiger Stelle in der Zeichenfolge
- Sie können das Filterverhalten des Browsers nicht steuern
- Für benutzerdefinierte Filterung erstellen Sie eine benutzerdefinierte Autocomplete-Komponente mit ARIA
Dynamische datalist mit JavaScript
Aktualisieren Sie die datalist-Optionen dynamisch:
<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>
<script>
document.getElementById('search-input').addEventListener('input', async function() {
const query = this.value;
const res = await fetch(`/api/search?q=${query}`);
const items = await res.json();
const dl = document.getElementById('suggestions');
dl.innerHTML = items.map(item =>
`<option value="${item.name}">`
).join('');
});
</script>Barrierefreiheit von datalist
Aspekte der Barrierefreiheit bei datalist:
- Screenreader geben die Vorschläge als Listbox aus
- Benutzer können mit den Pfeiltasten durch die Vorschläge navigieren
- Das input-Element akzeptiert weiterhin freien Text – stellen Sie sicher, dass die Validierung damit umgehen kann
Hinweise zur Browserunterstützung
Die Browserunterstützung für datalist ist gut, weist aber einige Besonderheiten auf:
- Chrome, Edge, Firefox: vollständige Unterstützung
- Safari: ab Safari 12.1+ unterstützt
- Mobile Browser: Die meisten zeigen Vorschläge an, aber die Benutzeroberfläche variiert
- Testen Sie immer in den Zielbrowsern, bevor Sie sich auf datalist verlassen
Wann Sie datalist nicht verwenden sollten
Datalist ist nicht ideal, wenn:
- Sie eine strenge Validierung benötigen, bei der der Benutzer aus der Liste auswählen muss
- Sie eine benutzerdefinierte Gestaltung der Optionen benötigen, da der Browser das gesamte Erscheinungsbild steuert
- Sie Gruppierungen benötigen, da optgroup in datalist nicht unterstützt wird
Verwenden Sie in diesen Fällen eine benutzerdefinierte Autocomplete-Komponente mit ARIA role="combobox".
datalist im Vergleich zu einem Sucheingabefeld
Vergleichen Sie datalist mit einem Sucheingabefeld mit Autocomplete:
<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
<option value="HTML tutorial">
<option value="HTML forms">
<option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->Kurze Überprüfung
Wie verknüpfen Sie ein input-Element mit seinem datalist-Element?
Zusammenfassung: datalist
Grundlagen zu datalist:
<datalist id>+<input list>– über übereinstimmende id und list verknüpft- Benutzer können freien Text eingeben oder einen Vorschlag auswählen
- Verwenden Sie
<select>, wenn die Auswahl eingeschränkt sein muss - Funktioniert mit Text-, Bereichs-, Farb- und anderen input-Typen
- Die Vorschläge werden während der Eingabe gefiltert
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „Datalist für die automatische Vervollständigung“ kostenlos?
Ja — der vollständige Text von „Datalist für die automatische Vervollständigung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Datalist für die automatische Vervollständigung“?
Schlagen Sie Eingabewerte mit dem datalist-Element vor Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Datalist für die automatische Vervollständigung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Select und option: Dropdown-Menüs
- Textarea für mehrzeilige Eingaben
- Gruppen aus Kontrollkästchen und Optionsfeldern
- Datalist für die automatische Vervollständigung