accessible-combobox.html

<input
  type="text"
<!-- Present the control as a select -->
  role="combobox"
<!-- Self-label the field using the placeholder -->
  placeholder="Search unicorns"
  id="search-field"
  aria-labelledby="search-field"
<!-- Link to the suggestions listbox -->
  aria-owns="suggestions"
<!-- The dropdown is expanded -->
  aria-expanded="true"
<!-- And the first option is selected -->
  aria-activedescendant="option-1"
<!-- Turn autocomplete off in the browser -->
  autocomplete="off"
<!-- Signify to screen readers that autocomplete is happening -->
  aria-autocomplete="list"
<!-- Disable features that interfere with keyboard and voice -->
  autocorrect="off"
  autocapitalize="off">
<ul id="suggestions" role="listbox">
  <li role="option" id="option-1" aria-selected="true">Adiana</li>
  <li role="option" id="option-2">Alairia</li>
  <li role="option" id="option-3">Alanala</li>
  <li role="option" id="option-4">Albany</li>
  <li role="option" id="option-5">Aletha</li>
  ...
</ul>

I don's hacked facebook <!-- Present the control as a select -->