Etiqueta datalist
La etiqueta datalist crea autocompletado
para campos de entrada input
en formularios HTML.
La esencia del autocompletado: cuando el usuario intente escribir algo en el campo de entrada, aparecerá una sugerencia emergente en la parte inferior que representará una lista de opciones disponibles para elegir. El usuario podrá seleccionar una de las opciones propuestas sin tener que escribirla completamente.
Para vincular el autocompletado a la etiqueta input,
es necesario asignarle el atributo
list, en el cual se debe especificar el atributo id
de la etiqueta datalist que se va a vincular.
Las opciones de elección se almacenan en las etiquetas option,
que a su vez se encuentran dentro de la etiqueta datalist.
Ejemplo
Ingresemos un país en el campo de entrada. Escribamos
primero la letra 'b' - y veremos una sugerencia
emergente con tres países. Luego, escribamos también
la letra 'e' - la cantidad de países sugeridos
se reducirá a dos:
<input type="text" list="country">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
</datalist>
:
Ejemplo
Ahora agreguemos el atributo value
a la etiqueta option. Al seleccionar un país
específico, en el input vinculado no aparecerá el nombre
del país, sino el contenido del atributo value:
<input type="text" list="country-value">
<datalist id="country-value">
<option value="Belarus">Belarus - a country of lakes and potatoes</option>
<option value="Belgium">Belgium - a country where Belgians live</option>
<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>
:
Ejemplo . Influencia del atributo autocomplete
El atributo autocomplete
afecta a la lista desplegable de sugerencias.
Si está activado (que es el valor por defecto),
a los valores que has establecido en la etiqueta
datalist se mezclarán aquellos valores
que el usuario haya introducido previamente en este campo.
Escribe 'Brazil' en el campo y haz clic
en el botón de envío (sin el envío, el navegador no recordará este país).
Luego, regresa a este ejemplo
e introduce la letra 'b' - en la lista
que aparece verás no solo 3 países
del datalist, sino también el país escrito anteriormente (además,
si haces lo mismo con la palabra
'Belarus' - en la lista desplegable este
valor aparecerá dos veces).
Si esto te molesta - desactiva el atributo autocomplete,
asignándole el valor off.
Realiza las manipulaciones descritas anteriormente con el ejemplo:
<form action="">
<input type="text" list="country" autocomplete="on">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
<input type="submit">
</datalist>
</form>
:
Ver también
-
el atributo
autocomplete,
que establece el autocompletado para los campos del formulario
