Поле ввода с автозаполнением, только HTML

Как сделать поле ввода с автозаполнением (autocomplete, автокомплит) с применением только HTML.

Элемент datalist

Начнём с поля ввода input и метки label для него.

<label for="city">Город</label>
<input type="text" id="city" name="city">

Добавим список, и это будет html-элемент datalist. В нём для каждого подходящего варианта автозаполнения понадобятся элементы option.

<label for="city">Город</label>
<input type="text" id="city" name="city">

<datalist>
  <option>Москва</option>
  <option>Санкт-Петербург</option>
  <option>Владивосток</option>
  <option>Севастополь</option>
  <option>Хабаровск</option>
</datalist>

Теперь нужно связать datalist и input.

Надо добавить html-элементу datalist атрибут id, а элементу input – атрибут list. Значение у этих атрибутов должно быть одинаковым.

<label for="city">Город</label>
<input type="text" id="city" name="city" list="city-list">

<datalist id="city-list">
  <option>Москва</option>
  <option>Санкт-Петербург</option>
  <option>Владивосток</option>
  <option>Севастополь</option>
  <option>Хабаровск</option>
</datalist>

Город

HTML-элемент datalist работает во всех современных браузерах.