El elemento <datalist> permite crear una lista de opciones predefinidas que se muestran como sugerencia en los controles del elemento <input>. La lista de sugerencias es inicialmente invisible, pero cuando el usuario hace clic o empieza a escribir se hace visible y facilita el autocompletado.
Lista de elementos descritos en este artículo:
| Elemento | Descripción |
|---|---|
<datalist> | Para crear una lista de sugerencias |
<option> | Para crear las sugerencias de la lista |
Hay que tener presente que el soporte provisto por los navegadores en el uso del elemento <datalist> es incompleto. Los desarrolladores no deberían confiar en su funcionalidad hasta que el soporte crezca. Para conocer el soporte actual de este elemento en los navegadores web revise el sitio Can I Use.
Ejemplo de código HTML de una lista de sugerencias:
<form>
<label for='sug'>Escoge una opción: </label>
<input list='desarrollo-web' id='sug' name='sug'>
<datalist id='desarrollo-web'>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</datalist>
</form>
El código anterior genera el resultado siguiente:
Haciendo clic en la caja del <input> aparece la lista de sugerencias. Si el usuario no selecciona ninguna, puede teclear y el navegador hará un filtrado. Por ejemplo, si en este caso introducimos la letra “h” sólo será visible la sugerencia del “HTML”, ya que es la única opción que contiene esta letra.
Crear una lista de sugerencias: elemento <datalist>
El elemento <datalist> permite definir un conjunto de sugerencias. Se trata de un elemento compuesto por dos etiquetas: <datalist> (de apertura) y </datalist> (de cierre). Entre estas dos etiquetas se introducirá un listado de sugerencias mediante el elemento <option>. Por tanto, el elemento <datalist> actúa como un contenedor de las sugerencias que queremos mostrar en el <input>.
Pero este listado de sugerencias no funcionaría por sí solo: es necesario vincular o enlazar el contenedor <datalist> con un elemento <input> determinado. Esta vinculación se realiza con dos atributos: usaremos el atributo id en el elemento <datalist> y el atributo list en el elemento <input>. Sus valores serán una cadena de texto que debe ser coincidente en ambos casos.
Ejemplo básico de asignación entre un <datalist> y un <input>:
<input list='desarrollo-web'>
<datalist id='desarrollo-web'></datalist>
Por su parte, las sugerencias son definidas con el elemento <option> y tal y como ya se ha dicho, deben encontrarse dentro del elemento <datalist>. También se trata de un elemento con dos etiquetas usadas para indicar la apertura y el cierre, por lo que su valor irá dentro de ellas, entre <option> y </option>.
Ejemplo básico de una lista de sugerencias:
<datalist id='desarrollo-web'>
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
</datalist>
En el momento de diseñar un control <datalist> es importante tener en consideración que la lista de sugerencias podría no cumplir con los requerimientos del control <input> asociado. Si esto ocurre, el navegador web ignorará las sugerencias que no estén cumpliendo con el formato.
La forma de evitar los problemas de compatibilidad es revisar meticulosamente los valores de la lista de sugerencias. Concretamente, conviene revisar que estos valores no estén limitados por ciertos atributos que podrían estar presentes en el elemento <input>, como: pattern, min, max o step.
Atributos de las opciones
El elemento <option> posee atributos que le son propios y que permiten un mayor nivel de configurabilidad: label, value, selected y disabled.
El atributo ‘label’
El elemento <option> admite la inclusión de etiquetas. Esto significa que además de mostrar un valor, es posible mostrar una etiqueta asociada. Para ello se usa el atributo label y su valor será una cadena de texto. Cuando el valor de label no está definido, su valor será el texto del contenido del elemento.
Ejemplo de código HTML de una lista de sugerencias con etiquetas:
<form>
<label for='sug'>Escoge una opción: </label>
<input list='devweb' id='sug' name='sug'>
<datalist id='devweb'>
<option label='versión 5'>HTML</option>
<option label='versión 3'>CSS</option>
<option label='ES2016'>JS</option>
</datalist>
</form>
Resultado:
Tal y como se observa en este ejemplo, la lista de sugerencias muestra tres opciones predefinidas acompañadas de sus etiquetas. Cuando el usuario escribe texto, el autocompletado tendrá en cuenta el valor del atributo label.
El atributo ‘value’
El atributo value contiene el valor que será enviado cuando el formulario envíe los datos. Si este atributo está ausente, se tomará el valor del texto del contenido del elemento <option>. Su valor será una cadena de texto.
El atributo ‘selected’
El atributo selected permite marcar como seleccionada una sugerencia por defecto cada vez que se carga el documento HTML. Es un atributo binario, por lo que si está presente, la opción aparecerá inicialmente seleccionada. En cambio, si está ausente, ninguna opción aparece seleccionada.
El atributo ‘disabled’
El atributo disabled se utiliza para deshabilitar el control. Si este atributo está presente, la opción queda deshabilitada y no se puede seleccionar. Así pues, se trata de un atributo binario: su presencia deshabilita el elemento, y su ausencia lo mantiene habilitado, por lo que no requiere ningún valor. Los navegadores web tienden a poner el elemento deshabilitado de color gris.
