combobox
A native datalist, upgraded. Without the module: functional autocomplete. With it: styled listbox, filtering, active-descendant keys.
Example
Basic usage
<m-combobox>
<input list="langs" placeholder="Language…" />
<datalist id="langs">
<option>Ard</option>
<option>Go</option>
</datalist>
</m-combobox>
<script type="module" src="mica/combobox.js"></script>API
m-combobox enhances an authored native input and datalist. The wrapper adds no authored attributes; the native markup is the complete no-JavaScript autocomplete fallback.
Content/markup contracts
| Content | Contract | Default | Description |
|---|---|---|---|
input | list references the datalist ID | — | Remains the value, focus, labeling, and event target. Give it an accessible name. |
datalist | authored options | — | Is the sole source of options. It may be populated asynchronously; the module observes option and value changes. |
Styling
| Target | Value | Default | Description |
|---|---|---|---|
m-combobox | positioning wrapper | block | The enhanced listbox positions inside this wrapper rather than in the top layer. |
combobox.js
Optional. Replaces the native popup with an ARIA combobox/listbox presentation, substring filtering, pointer selection, and Arrow, Enter, and Escape handling. It manages expanded, controls, active-descendant, selected, and autocomplete semantics.
Selection writes through the native input value setter so controlled-input frameworks can observe it, then dispatches bubbling input and change events. Without the module, the native datalist remains functional.
<script type="module" src="mica/combobox.js"></script>Accessibility
The module wires the ARIA combobox pattern while keeping focus on the input. The listbox works in every browser Mica supports because it remains inside the wrapper rather than using the top layer.