Autocomplete

The autocomplete component (.autocomplete) styles a text-input-plus-suggestions-listbox pattern: a real .input-based text field with an absolutely-positioned panel of matching results beneath it. FlickUI ships only the CSS — opening/closing the listbox, filtering, and selection are left to page-level JavaScript, since there's no generic autocomplete behavior flickui.js can wire up.

<div class="autocomplete" style="min-width:220px">
  <label class="input autocomplete-field">
    <input class="input-el" type="text" placeholder="Search city…" aria-label="City" role="combobox" aria-expanded="false" aria-autocomplete="list">
  </label>
  <ul class="autocomplete-listbox" role="listbox" hidden>
    <li class="autocomplete-option" role="option" aria-selected="false">
      <span class="autocomplete-opt-label">New York</span>
      <span class="autocomplete-opt-desc">United States</span>
    </li>
  </ul>
</div>