mica
Forms / combobox

combobox

Tier 2

A native datalist, upgraded. Without the module: functional autocomplete. With it: styled listbox, filtering, active-descendant keys.

 
<m-combobox>
  <input list="langs" placeholder="Language&#8230;" />
  <datalist id="langs">
    <option>Ard</option>
    <option>Go</option>
  </datalist>
</m-combobox>

<script type="module" src="mica/combobox.js"></script>

Notes

The options are the author's datalist markup — the module presents them, it doesn't invent them. It wires the ARIA combobox pattern: aria-expanded, aria-activedescendant, substring filtering on input, Arrow/Enter/Esc keys, selection dispatches real input/change events. The listbox positions inside the wrapper (no top layer), so it works in every browser mica supports.

← tabs