A tag <datalist> veio para substituir a tag <select>?

Fonte do vídeo: https://front.tips/html-data-list/

Em uma demonstração muito bem feita do colega Arbaoui Mehdi (thank you!), ele explica uma boa prática de utilização da tag html <datalist>. Uma pergunta certamente vai pairar na cabeça dos alunos de desenvolvimento web: "Afinal, a tag <datalist> veio para substituir a tag <select>?

A resposta é não. A tag <datalist> não tem a finalidade de substituir a tag <select>. Elas são usadas para propósitos diferentes e oferecem funcionalidades diferentes.

A tag <select> cria um menu suspenso - também chamado de drop-down - do qual os usuários devem selecionar uma das opções fornecidas. Aqui está um exemplo:

<select name="navegador">

 <option value="firefox">Firefox</option>

 <option value="edge">Edge</option>

 <option value="chrome">Chrome</option>

 <option value="opera">Opera</option>

 <option value="safari">Safari</option>

</select>

Resultado:

Firefox Edge Chrome Opera Safari

Por outro lado, a tag <datalist> fornece uma lista de opções sugeridas para um elemento <input>, permitindo a funcionalidade de preenchimento automático. Os usuários podem selecionar uma das opções sugeridas ou digitar sua própria entrada. Aqui está um exemplo:

<input list="navegadores" name="navegador">

<datalist id="navegadores">

 <option value="Firefox">

 <option value="Edge">

 <option value="Chrome">

 <option value="Opera">

 <option value="Safari">

</datalist>

Resultado:

A escolha entre <datalist> e <select> depende das necessidades do bloco que você está escrevendo. Se você quiser restringir o usuário a selecionar apenas entre as opções dadas, use <select>. Se você quiser sugerir opções, mas também permitir que o usuário insira sua própria entrada, use <datalist>.

Sacou? Espero ter ajudado!