Eingabefelder: Combo Box

1. Übersicht und Zweck

Status: [Live]. Referenz: DevExpress ASPxComboBox (Text+Value-Paare, optional freie Texteingabe).

2. Voraussetzungen

Gemeinsamer Feld-Kontrakt bereits verstanden.

3. Konzepte

No-JS-Basis: natives <select>. Ohne JavaScript rendert die Combo Box ein natives <select><option>…</option></select> — vollständig funktionsfähig, inklusive Tastatur-Typeahead des Browsers. scripts/formfields.js (Progressive Enhancement) würde bei $opts['filterable'] => true ein Such-Textfeld über die Optionsliste legen — der zugrunde liegende <select> bleibt das POST-Feld.

4. Erste Schritte

echo $widgets->comboBox([
    'name'    => 'engine',
    'label'   => 'Datenbank-Engine',
    'value'   => 'sqlite',
    'options' => [
        ['value' => 'sqlite', 'label' => 'SQLite'],
        ['value' => 'mysql',  'label' => 'MySQL'],
        ['value' => 'pgsql',  'label' => 'PostgreSQL'],
    ],
]);

Falsch: allowUserInput ⇒ true ohne serverseitige Validierung gegen eine bekannte Werteliste, wenn der Wert anschließend in einer SQL-Abfrage landet (s. Abschnitt 7, Sicherheit).

5. Verwendung

Bedarf	Muster
Feste Werteliste	`options` ohne `allowUserInput`
Werteliste mit Freitext-Ausweich	`allowUserInput ⇒ true` — rendert `<input list>`+`<datalist>` statt `<select>`
Beliebiger Popup-Inhalt statt fester Liste	Dropdown Editor

6. API-Referenz

Methode comboBox(array $opts): string in helper_plugin_wkfluentui_widgets.

7. Parameter, Optionen und Zustände

Schlüssel	Typ	Bedeutung
`options`	array `[['value' => string, 'label' => string], …]`	Optionsliste, `label` per `hsc()` escaped
`allowUserInput`	bool	erlaubt Freitext neben der Liste (Analog `ASPxComboBox.AllowUserInput`) — erfordert ein zusätzliches Textfeld, da natives `<select>` keine freie Eingabe kennt: bei `true` rendert das Feld stattdessen ein `<input list="…">` mit `<datalist>` (natives HTML5-Äquivalent)
`filterable`	bool	Live-Filter der Optionsliste per Tastatur (JS-Progressive-Enhancement)

Sicherheit: allowUserInput ⇒ true ohne serverseitige Validierung gegen eine bekannte Werteliste, wenn der Wert anschließend in einer SQL-Abfrage landet (CWE-89) — Freitext aus einer Combo Box ist genauso wenig vertrauenswürdig wie jedes andere Formularfeld.

8. Vollständige Beispiele

echo $widgets->comboBox([
    'name'            => 'tag',
    'label'           => 'Schlagwort',
    'options'         => $bekannteTags,
    'allowUserInput'  => true,
]);

9. Einschränkungen und Randfälle

Keine über die Feature-Seiten hinaus.

10. Accessibility und Kompatibilität

Vollständiger Überblick: Accessibility.

11. Troubleshooting

Entfällt.

12. Verwandte Themen

Demo-Übersicht — alle Kategorien
Eingabefelder: Dropdown Editor — freie Inhalte statt Text+Value-Liste
Eingabefelder: Grundlagen — gemeinsamer Feld-Kontrakt