Einführung

Ein Autovervollständigungs-Eingabesteuerelement, das ein Textfeld mit einer Dropdown-Listbox kombiniert und Benutzern das Filtern und Auswählen aus einer Liste von Optionen ermöglicht. Wird primär für lange Optionsfeeds, Plattformfilter, Tags und Kategorieauswahl verwendet.

Die Combobox-Komponente ist vollständig als interaktiver combobox-Block in den Page Builder integriert, sodass Inhaltsautoren und Entwickler Eingabebezeichnungen, Platzhalter, vordefinierte Elementlisten und Interaktionseinstellungen direkt im CMS konfigurieren können.

Verwendung

Diese Beispiele veranschaulichen, wie Inhaltseditoren interaktive Combobox-Komponenten binden und strukturieren.

1. Standardmäßiger Technologie-Filter (Interaktive Auswahl)

Eine standardmäßige durchsuchbare Combobox, die mit Auswahlmöglichkeiten vorab geladen ist und Benutzern das Filtern oder direkte Auswählen ihrer Zieloptionen erlaubt.

{
  "type": "combobox",
  "label": "Preferred Tech Stack",
  "placeholder": "Select a Framework",
  "items": [
    { "label": "React", "value": "react" },
    { "label": "Solid", "value": "solid" },
    { "label": "Svelte", "value": "svelte" },
    { "label": "Vue", "value": "vue" },
    { "label": "Hono", "value": "hono" }
  ],
  "interactive": true
}

2. Löschbare Optionssuche (Benutzerdefinierte Elemente)

Bietet eine begleitende Löschaktion, mit der Benutzer ausgewählte Optionen mit einem einzigen Klick entfernen können. Ideal für Plattformsuchen, Standorte oder Länderauswahllisten.

{
  "type": "combobox",
  "label": "Country Selection",
  "placeholder": "Search countries...",
  "items": [
    { "label": "United States", "value": "us" },
    { "label": "Germany", "value": "de" },
    { "label": "France", "value": "fr" },
    { "label": "United Kingdom", "value": "uk" },
    { "label": "Canada", "value": "ca" }
  ],
  "allowClear": true,
  "interactive": true
}

3. Deaktiviertes Eingabefeld

Demonstriert ein vorübergehend gesperrtes Autovervollständigungsfeld. Dies bewahrt aktuelle Bezeichnungen und Auswahlen, verhindert jedoch das Eintippen, Filtern oder Aktivieren des Dropdowns.

{
  "type": "combobox",
  "label": "Select Database Engine",
  "placeholder": "Temporarily unavailable",
  "items": [],
  "disabled": true,
  "interactive": true
}

Eigenschaften

Listenelementeigenschaften (items)

Entwicklerhinweise & Barrierefreiheit

• Intelligente adaptive Hydration (Stufe 2): Zur Optimierung der anfänglichen Seitengeschwindigkeit wird die Combobox beim Serverladen in statisches, JS-freies HTML/CSS-Markup kompiliert und lädt interaktive JS-Payloads nur herunter, wenn benutzerdefinierte Signale bereitgestellt werden oder "interactive": true explizit übergeben wird.
• Zugängliche Listboxen: Die Komponente arbeitet in voller Übereinstimmung mit den WAI-ARIA-Combobox-Barrierefreiheitsrollen. Fokussprünge, Pfeiltasten-Optionsauswahlen und Tastaturaktivierungen erfolgen nativ und sofort einsatzbereit.
• Einheitliche Formularübermittlungen: Ausgewählte Werte werden direkt auf Standard-Formular-POST-Anfragen abgebildet, sodass Entwickler Auswahlzustände nicht programmatisch mit globaler benutzerdefinierter Übermittlungslogik verknüpfen müssen.