Autocomplete

wu-autocomplete pairs a wu-input with a list of options. The kit script filters the options in the markup as the user types and handles the keyboard. It follows the WAI-ARIA combobox pattern with a list box.

Class or attribute	Effect
`wu-autocomplete`	Root. Positions the list under the input; the input takes the full width
`wu-autocomplete-list`	Part, on `<ul role="listbox">`. Raised list under the input, scrolls when long
`wu-autocomplete-option`	Part, on `<li role="option">`
`wu-autocomplete-empty`	Part. Muted message shown when nothing matches
`aria-selected="true"` on an option	Active option: selected tint and a start bar, so color is not the only signal
`aria-disabled="true"` on an option	Dimmed, cannot be picked
`animated`	The list fades and slides in, opt-in
`--wu-autocomplete--MaxHeight`	Height after which the list scrolls, 16rem by default

Default

Type to filter, then pick with the arrow keys and Enter, or with the pointer.

City

<div class="wu-autocomplete">
  <label class="wu-field-label" for="autocomplete-city">City</label>
  <input class="wu-input" id="autocomplete-city" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="autocomplete-city-list" autocomplete="off">
  <ul class="wu-autocomplete-list" id="autocomplete-city-list" role="listbox" aria-label="Cities" hidden>
    <li class="wu-autocomplete-option" id="autocomplete-city-1" role="option">Amsterdam</li>
    <li class="wu-autocomplete-option" id="autocomplete-city-2" role="option">Berlin</li>
    <li class="wu-autocomplete-option" id="autocomplete-city-3" role="option">Lisbon</li>
    <li class="wu-autocomplete-option" id="autocomplete-city-4" role="option">Madrid</li>
    <li class="wu-autocomplete-option" id="autocomplete-city-5" role="option" aria-disabled="true">Oslo (unavailable)</li>
    <li class="wu-autocomplete-option" id="autocomplete-city-6" role="option">Paris</li>
  </ul>
  <p class="wu-autocomplete-empty" hidden>No matches</p>
</div>

The script sets aria-expanded, aria-activedescendant, aria-selected and hidden, and fires a change event on the input when an option is picked. It also fills in the roles, the ids and aria-controls when they are missing.

Inside a field

Language

Used for emails and invoices.

<div class="wu-field">
  <label class="wu-field-label" for="autocomplete-lang">Language</label>
  <div class="wu-autocomplete animated">
    <input class="wu-input" id="autocomplete-lang" type="text" aria-describedby="autocomplete-lang-hint">
    <ul class="wu-autocomplete-list" aria-label="Languages" hidden>
      <li class="wu-autocomplete-option">English</li>
      <li class="wu-autocomplete-option">French</li>
      <li class="wu-autocomplete-option">German</li>
      <li class="wu-autocomplete-option">Portuguese</li>
      <li class="wu-autocomplete-option">Spanish</li>
    </ul>
    <p class="wu-autocomplete-empty" hidden>No matches</p>
  </div>
  <p class="wu-field-message" id="autocomplete-lang-hint">Used for emails and invoices.</p>
</div>

This example carries animated: the list fades and slides in under prefers-reduced-motion: no-preference. wu-animated on an ancestor does the same.

Script

The drop-in script and the ES module start every wu-autocomplete on the page. For one added later:

import { init } from '@wovenui/components/js';

init(document.getElementById('checkout'));

Read the picked value from the input’s change event. See JavaScript.

Accessibility

Focus stays in the input. Down and Up arrows move the active option, Enter picks it, Esc closes the list, and a second Esc clears the input.
Screen readers follow the active option through aria-activedescendant.
Give the input a <label> and the list an aria-label.
In forced colors mode the active option uses the highlight colors.

Right to left

The active option bar and the text follow the inline start.

المدينة

<div class="wu-autocomplete">
  <label class="wu-field-label" for="autocomplete-rtl">المدينة</label>
  <input class="wu-input" id="autocomplete-rtl" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="autocomplete-rtl-list" autocomplete="off">
  <ul class="wu-autocomplete-list" id="autocomplete-rtl-list" role="listbox" aria-label="المدن" hidden>
    <li class="wu-autocomplete-option" id="autocomplete-rtl-1" role="option">القاهرة</li>
    <li class="wu-autocomplete-option" id="autocomplete-rtl-2" role="option">الرياض</li>
  </ul>
</div>

Load only the autocomplete

@use "@wovenui/components/autocomplete";

The autocomplete needs the input. The entry loads both; in the bundle, switching input off while autocomplete is on stops the compile with an error. The examples above also use the field and the field message.