HTMLDataListElement.options — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLDataListElement.options

Beschreibung

Die schreibgeschützte Eigenschaft options des Interfaces HTMLDataListElement gibt eine HTMLCollection zurück. Sie enthält alle HTMLOptionElement-Objekte, die zum <datalist> gehören. Ein <datalist> liefert Vorschläge für die Autovervollständigung eines <input>-Felds, das über das Attribut list mit ihm verbunden ist.

Die Sammlung ist live. Fügst du <option>-Elemente per DOM-Methoden hinzu oder entfernst sie, ändert sich die Sammlung sofort mit. Du brauchst die Eigenschaft nicht neu abzufragen. Typische Anwendungen: Vorschläge zählen, prüfen, ob eine Eingabe einem vorhandenen Vorschlag entspricht, oder die aktuellen Werte auslesen, zum Beispiel für eine eigene Validierung.

Die Eigenschaft selbst kannst du nicht überschreiben. Die Elemente in der Sammlung sind aber normale DOM-Knoten. Du kannst also ihre Eigenschaften wie value, label oder disabled ändern oder die Knoten mit remove() entfernen.

Rückgabewert

Typ

HTMLCollection<HTMLOptionElement>

Beschreibung

Eine live aktualisierte HTMLCollection mit allen <option>-Elementen des <datalist> in Dokumentreihenfolge. Hat das <datalist> keine Optionen, ist die Sammlung leer (length === 0).

Beispiele

Alle Vorschlagswerte auslesen

// HTML:
// <input list="browsers" id="browser">
// <datalist id="browsers">
//   <option value="Firefox"></option>
//   <option value="Chrome"></option>
//   <option value="Safari"></option>
// </datalist>

const datalist = document.getElementById('browsers');
const werte = Array.from(datalist.options, (opt) => opt.value);

console.log(datalist.options.length);
console.log(werte);

3 ["Firefox", "Chrome", "Safari"]

Eingabe gegen die Vorschlagsliste prüfen

const input = document.getElementById('browser');

input.addEventListener('change', () => {
  const { options } = input.list; // input.list liefert das verknüpfte <datalist>
  const gueltig = [...options].some((opt) => opt.value === input.value);

  input.setCustomValidity(gueltig ? '' : 'Bitte einen Wert aus der Liste wählen.');
  input.reportValidity();
});

Live-Verhalten beim dynamischen Nachladen von Vorschlägen

const datalist = document.getElementById('browsers');
const options = datalist.options; // Referenz einmal speichern

console.log(options.length); // 3

const ladeVorschlaege = async () => {
  // Simulierte API-Antwort
  const daten = await Promise.resolve(['Edge', 'Opera']);
  datalist.append(...daten.map((wert) => new Option(wert)));
};

await ladeVorschlaege();
console.log(options.length); // Sammlung hat sich automatisch aktualisiert

3 5

// Wichtig · Fallstricke

Keine echte Array-Instanz: Eine HTMLCollection hat kein map(), filter() oder forEach(). Wandle sie mit Array.from() oder dem Spread-Operator um. Mit for...of kannst du sie direkt durchlaufen.
Vorsicht beim Löschen in Schleifen: Die Sammlung ist live. Wenn du Elemente in einer Indexschleife entfernst, verschieben sich die Indizes und Elemente werden übersprungen. Lege vorher eine Kopie an ([...datalist.options].forEach((o) => o.remove())) oder leere das Element mit datalist.replaceChildren().
Schreibgeschützt: Eine Zuweisung an datalist.options wird ignoriert, im Strict Mode löst sie einen TypeError aus. Anders als bei HTMLSelectElement.options gibt es hier kein add() und kein remove(index). Neue Optionen fügst du mit append() oder appendChild() hinzu.
Deaktivierte Optionen: <option disabled> ist in der Sammlung enthalten, wird dem Nutzer aber nicht vorgeschlagen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Wie Vorschläge dargestellt und gefiltert werden, hängt vom Browser ab. Besonders auf Mobilgeräten und bei Typen wie type=\"color\" oder type=\"range\" unterscheidet sich das Verhalten.

Siehe auch

Array.from() HTMLMeterElement.optimum HTMLSelectElement.options HTMLDetailsElement.open HTMLDialogElement.open