Autocomplete

<div>
  <label class="form-label" for="ac-1">City</label>
  <div class="combobox" data-combobox>
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="ac-1" type="text" role="combobox" aria-expanded="false" aria-controls="ac-1-list" aria-autocomplete="list" autocomplete="off" placeholder="Start typing a city">
      <button type="button" class="field-btn" tabindex="-1" aria-label="Show options" data-combo-toggle><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <ul class="combo-list glass" id="ac-1-list" role="listbox" hidden aria-label="Cities">
      <li role="option" id="ac-1-o0" aria-selected="false" data-value="Amsterdam"><span>Amsterdam</span></li>
      <li role="option" id="ac-1-o1" aria-selected="false" data-value="Barcelona"><span>Barcelona</span></li>
      <li role="option" id="ac-1-o2" aria-selected="false" data-value="Berlin"><span>Berlin</span></li>
      <li role="option" id="ac-1-o3" aria-selected="false" data-value="Copenhagen"><span>Copenhagen</span></li>
      <li role="option" id="ac-1-o4" aria-selected="false" data-value="Dublin"><span>Dublin</span></li>
      <li role="option" id="ac-1-o5" aria-selected="false" data-value="Lisbon"><span>Lisbon</span></li>
      <li role="option" id="ac-1-o6" aria-selected="false" data-value="London"><span>London</span></li>
      <li role="option" id="ac-1-o7" aria-selected="false" data-value="Madrid"><span>Madrid</span></li>
      <li role="option" id="ac-1-o8" aria-selected="false" data-value="Oslo"><span>Oslo</span></li>
      <li role="option" id="ac-1-o9" aria-selected="false" data-value="Paris"><span>Paris</span></li>
      <li role="option" id="ac-1-o10" aria-selected="false" data-value="Prague"><span>Prague</span></li>
      <li role="option" id="ac-1-o11" aria-selected="false" data-value="Stockholm"><span>Stockholm</span></li>
      <li role="option" id="ac-1-o12" aria-selected="false" data-value="Vienna"><span>Vienna</span></li>
      <li role="option" id="ac-1-o13" aria-selected="false" data-value="Warsaw"><span>Warsaw</span></li>
      <li role="option" id="ac-1-o14" aria-selected="false" data-value="Zurich"><span>Zurich</span></li>
      <li class="combo-empty" hidden>No matches</li>
    </ul>
  </div>
</div>

<div>
  <label class="form-label" for="ac-2">Product</label>
  <div class="combobox" data-combobox>
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="ac-2" type="text" role="combobox" aria-expanded="false" aria-controls="ac-2-list" aria-autocomplete="list" autocomplete="off" placeholder="Type to search">
      <button type="button" class="field-btn" tabindex="-1" aria-label="Show options" data-combo-toggle><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
    </div>
    <ul class="combo-list glass" id="ac-2-list" role="listbox" hidden aria-label="Products">
      <li role="option" id="ac-2-o0" aria-selected="false" data-value="VT-1040"><span>Aero Wireless Headphones</span><small>$249</small></li>
      <li role="option" id="ac-2-o1" aria-selected="false" data-value="VT-1047"><span>Pulse Smart Watch</span><small>$329</small></li>
      <li role="option" id="ac-2-o2" aria-selected="false" data-value="VT-1054"><span>Lumen Desk Lamp</span><small>$89</small></li>
      <li role="option" id="ac-2-o3" aria-selected="false" data-value="VT-1061"><span>Nimbus Backpack</span><small>$119</small></li>
      <li role="option" id="ac-2-o4" aria-selected="false" data-value="VT-1068"><span>Orbit Bluetooth Speaker</span><small>$139</small></li>
      <li role="option" id="ac-2-o5" aria-selected="false" data-value="VT-1075"><span>Vista 4K Monitor</span><small>$499</small></li>
      <li role="option" id="ac-2-o6" aria-selected="false" data-value="VT-1082"><span>Glide Wireless Mouse</span><small>$59</small></li>
      <li role="option" id="ac-2-o7" aria-selected="false" data-value="VT-1089"><span>Breeze Running Shoes</span><small>$129</small></li>
      <li role="option" id="ac-2-o8" aria-selected="false" data-value="VT-1096"><span>Atlas Travel Mug</span><small>$32</small></li>
      <li role="option" id="ac-2-o9" aria-selected="false" data-value="VT-1103"><span>Prism Mechanical Keyboard</span><small>$159</small></li>
      <li class="combo-empty" hidden>No matches</li>
    </ul>
  </div>
</div>