Combobox

A text field with its suggestions under it. The suggestions are a plain <datalist>, so the field still offers them where the script never runs.

Basic

<label data-field>
  <span>Static site generator</span>
  <input list="combobox-tools" data-combobox>
  <datalist id="combobox-tools">
    <option>Astro</option><option>Eleventy</option><option>Hugo</option>
    <option>Jekyll</option><option>Next.js</option><option>SvelteKit</option>
  </datalist>
  <small>Type a few letters to narrow the list.</small>
</label>

Type to filter, Up and Down to walk the list, Enter to take the option in hand, Escape to close it.

Notes

• s72.js moves the options into a <menu role="listbox"> after the input and leaves the datalist empty, so the browser's own list cannot open over it.
• The input carries role="combobox" with aria-expanded, aria-controls, aria-autocomplete="list" and aria-activedescendant, which is what a screen reader reads the active option from.
• Filtering is a plain contains, ignoring case, so "lev" finds Eleventy.
• A click picks, and so does leaving the field alone: blur closes the list without changing the value.
• The list is placed against whatever holds the input, so it sits under the field inside a label[data-field] as well as on its own.