El elemento <datalist> provisto en HTML5 permite crear un conjunto de opciones viables para establecer como valor en otros elementos de tipo input; en otras palabras, el elemento <datalist> ofrece una lista de opciones predefinidas a través de los elementos <option>; su uso común es establecer elementos inputs de variados tipos con un conjunto de opciones a través del <datalist>:
Navegador preferido
¿Cómo utilizar los <datalist> en conjunto con los inputs?
Para emplear los <datalist> en conjunto con los inputs se debe establecer algún identificador en el <datalist> a través del atributo id; además se deben de establecer un conjunto de </opcion> como posibles opciones establecidos en el <datalist>:
<datalist id="navegadores">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>Con el valor del identificador anterior, se establece a través del atributo list en el input:
<input list="navegadores" type="text">También podemos colocar un atributo label a los elementos <option> en conjunto con un texto alternativo:
<datalist id="urls">
<option value="http://www.google.com" label="Google">
<option value="http://www.bing.com" label="Bing">
<option value="http://www.yahoo.com" label="Yahoo">
</datalist>Buscadores:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter