Uso del elemento datalist

Con la introducción de HTML5 al mundo de la programación, una gama de herramientas nuevas fueron proporcionadas para aumentar las posibilidades de lograr un mejor estructurado y semántico desarrollo web. Muchos de estos nuevos elementos fueron enfocados a la mejora del manejo de formularios, entre los más interesantes encontrados al elemento datalist.

La etiqueta datalist, es un concepto introducido por esta versión del lenguaje, para definir una lista de opciones que podemos presentar al usuario para su elección. Generalmente cuando realizamos un formulario, utilizamos el elemento select para delimitar las respuestas que puede dar un usuario, presentando una lista de opciones y de esa manera evitar que existan respuestas incorrectas. Cuando se presenta un caso donde necesitemos dar opciones pero sin limitar al usuario, es ahí donde entra datalist.

Si relacionamos la lista que definimos mediante datalist, con un elemento de tipo input text, podemos modificar su conducta por defecto y hacer que se despliegue un conjunto de sugerencias al momento de que el usuario ingrese algún caracter.El comportamiento que obtenemos, es algo que se puede observar en muchos sitios de la actualidad; sin embargo, hasta hoy esto solo era posible de hacer utilizando JavaScript como complemento.

Uso de la etiqueta

Como ya dijimos el elemento datalist consiste en una lista, y como tal debemos definirla para poder utilizala. Dentro de la etiqueta debemos establecer un conjunto de opciones, algo parecido a lo que hacemos con el elemento select, con la diferencia de que datalist no es un elemento que tenga control independiente, por ello se utiliza en complemento con un input.

Una definición sencilla, seria como la siguiente:

<label>Dinos cual es tu color favorito:</label>
<input type="text" id="color_favorito" list="colores" />
<datalist id="colores">
    <option value="Azul" />
    <option value="Amarillo" />
    <option value="Rojo" />
    <option value="Verde" />
    <option value="Negro" />
    <option value="Blanco" />
    <option value="Naranja" />
</datalist>

Como se puede apreciar en el código, hacemos uso de un input sencillo de tipo texto, el cual cuenta con un atributo que lleva por nombre “list”. Este atributo es utilizado para indicarle al navegador lo que debe cargar al momento de que el usuario ingrese un valor en la caja del formulario. Para poder lograr esta relación, el valor del atributo list debe de coincidir con el id del elemento datalist que contiene la lista de valores o sugerencias para ese campo.

Depués del elemento input, pasamos a definir la lista con el elemento datalist, esta estará compuesta por un conjunto de elementos de tipo option. Cada uno de estas opciones aparecerá cuando la letra que ingresemos en la caja coincida con su letra inicial. A medida que vayamos agregando más caracteres a la caja, la lista se ira refinando, hasta que quede la opción que más se asemeje a lo que se esta escribiendo.

Desgraciadamente el resultado puede variar de navegador a navegador, pero en términos generales obtendrás un resultado similar al que puedes observar en la página de Google.

Vale aclarar que el elemento datalist, puede ser utilizado con otros tipos de input, no solo texto. En base a lo que nos dice la W3C, esta clase de listas se puede utilizar con tipo url, teléfono, color y fecha.

Añadir más atributos

Podemos llevar las cosas a un nivel más adelante y utilizar el atributo label para complementar la estructura de las sugerencias. Sin embargo, tenemos que ser precavidos con el uso de este atributo, ya que el resultado que obtenemos luce distinto en los navegadores, hay incluso algunos navegadores que solo muestran el valor agregado en este atributo, como el caso de Firefox.

Si llegamos a utilizar los dos atributos, tanto value como label, debemos tener en mente que Opera filtrará en base a los dos atributos, Firefox utilizará el valor de label para desplegar la sugerencia y Chrome ignorará el valor de label para traer resultados.

<label>Dinos cual es tu color favorito:</label>
<input type="text" id="color_favorito" list="colores" />
<datalist id="colores">
    <option value="Azul" label="como el cielo"/>
    <option value="Amarillo" label="como el Sol"/>
    <option value="Rojo" label="como la sangre"/>
    <option value="Verde" label="como los campos"/>
    <option value="Negro" label="como el carbón"/>
    <option value="Blanco" label="como la pureza"/>
    <option value="Naranja" label="como el cítrico"/>
</datalist>

Soporte

Como hemos podido apreciar el elemento datalist aún se encuentra en camino a un estandarización, es por eso que por obvias razones no es soportado por todos los navegadores. Si estás dispuesto a dar soporte a navegadores viejos, olvídate por completo de utilizar esta etiqueta, o en su lugar ofrece una alternativa para el usuario cuando este ingrese desde una versión vieja.

Si bien no es necesario ofrecer una alternativa, ya que los navegadores viejos simplemente ignoran al elemento datalist y ninguna funcionalidad extra es realizada, como consejo te decimos, que es mejor dar una funcionalidad similar, de esta manera puedes garantizar que la usabilidad del sitio será la misma para todos los casos. Como alternativa a este elemento puedes hacer uso de jQuery autocomplete.

Este elemento es soportado en la actualidad, por casi todos los navegadores modernos en sus últimas versiones. Internet Explorer lo soporta desde su versión 10, Firefox desde la 4, Chrome y Opera también ofrecen soporta, sin embargo Safari aún no.