Datalist HTML

O elemento datalist é usado para fornecer uma lista de opções para um #campo <input>. O elemento #datalist deve ser colocado no mesmo elemento ou elemento pai do campo <input>. O atributo list do campo <input> deve ser definido para o valor do atributo id do elemento datalist.

O seguinte código #HTML cria um campo <input> com uma lista de opções fornecida pelo elemento datalist:

HTML

<input type="text" list="countries">
<datalist id="countries">
  <option value="United States">United States</option>
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
  <option value="Brazil">Brazil</option>
  <option value="China">China</option>
  <option value="India">India</option>
</datalist>

Quando o usuário digitar no campo <input>, ele verá as opções da lista <datalist>. O usuário pode selecionar uma opção da lista ou digitar uma opção diferente.