Как сделать подсказки при вводе в поле

Короткий ответ

Создайте <datalist> с вариантами и свяжите его с полем атрибутом list:

<label>
  City
  <input list="cities" name="city">
</label>
 
<datalist id="cities">
  <option value="Berlin">
  <option value="London">
  <option value="Paris">
  <option value="Prague">
</datalist>

Щёлкните по полю или начните печатать «P» — браузер покажет подходящие варианты. При этом можно ввести и любой свой город.

Не только текст

<datalist> работает с разными типами полей. У ползунка варианты превращаются в отметки на шкале, у поля цвета — в готовую палитру:

<input type="color" list="brand" value="#4682b4">
<datalist id="brand">
  <option value="#4682b4"><option value="#2e8b57"><option value="#ff6347">
</datalist>

datalist или select

<select> разрешает выбрать только один из перечисленных вариантов. <datalist> лишь подсказывает, а вводить можно что угодно. Если значение обязано быть из списка — например, размер одежды, — нужен <select>.

Частая ошибка

Атрибут list указывают не совпадающим с id у <datalist> или пишут в нём селектор #cities. Связь не возникает, и подсказки просто не появляются, без всякой ошибки. В list пишут ровно значение id, без решётки.