Carregando
O elemento <datalist> fornece sugestões de autocomplete para inputs sem necessidade de JavaScript.
listAtributo do input que referencia o id do datalist para conectá-los
idIdentificador único do datalist que será referenciado pelo input
O <datalist> é conectado a um input através do atributo list. As opções dentro do datalist são sugeridas ao usuário conforme ele digita.
Conexão input + datalistO input precisa ter o atributo
list="id-do-datalist"e o datalist precisa ter oidcorrespondente.
Tipos compatíveisFunciona com diversos tipos de input: text, search, url, email, tel, number, range e até color!
export default function AutocompleteExample() {
return (
<div>
<label htmlFor="framework">Escolha um framework:</label>
<input
type="text"
id="framework"
list="frameworks"
placeholder="Digite para buscar..."
/>
<datalist id="frameworks">
<option value="React" />
<option value="Vue" />
<option value="Angular" />
<option value="Svelte" />
<option value="Next.js" />
<option value="Nuxt" />
<option value="Astro" />
</datalist>
</div>
);
}Digite nos campos abaixo para ver as sugestões de autocomplete. O datalist funciona com diferentes tipos de input.