Creando listas de datos

Para mostrar cómo funciona una lista de datos, vamos a empezar con una entrada de texto tradicional:

1. <label for=»favorite_team»>Equipo favorito:</label>
2. <input type=»text» name=»team» id=»equipo_favorito»>

Este campo pide al usuario que proporcione su equipo deportivo favorito. Por defecto, el usuario no recibirá ninguna ayuda adicional para completar el campo. Pero al utilizar una lista de datos, puede proporcionar una lista de opciones que el usuario puede seleccionar para completar el campo. Para ello, defina una lista de datos con un elemento de opción para cada sugerencia:

1. <datalist>
2. <option>Los Leones de Detroit</option>
3. <option>Detroit Pistons</option>
4. <option>Detroit Red Wings</option> ¡
5. <option>Tigres de Detroit</option>
6. <!- etc… ->
7. </datalist>

Para vincular una datalist a un elemento de entrada, dale al elemento de entrada un atributo de lista y a la datalist un atributo id que coincidan. Este es un ejemplo:

1. <label for=»favorite_team»>Equipo favorito:</label>
2. <input type=»text» name=»team» id=»favorite_team» list=»team_list»>
3. <datalist id=»team_list»>
4. <option>Detroit Lions</option>
5. <option>Detroit Pistons</option>
6. <option>Detroit Red Wings</option>
7. <option>Tigres de Detroit</option>
8. <!- etc… ->
9. </datalist>

Nota que el atributo list de la entrada y el atributo id de la datalist contienen el mismo valor, «team_list». Esto proporciona el enlace entre los dos.

Eso es todo. No se necesita JavaScript para hacer funcionar un datalist. La figura 1 muestra lo que el usuario verá en los navegadores compatibles después de escribir una D.


Figura 1. Visualización de la lista de datos (arriba a la izquierda: Internet Explorer 10; arriba a la derecha: Firefox 18; abajo a la izquierda: Chrome 24; abajo a la derecha: Opera 12)

Nota: Internet Explorer 10 y Opera no requieren que el usuario escriba un carácter antes de ver las sugerencias, mientras que Firefox y Chrome sí.

Los elementos de opción también pueden tener un atributo de valor. Esto es útil cuando un usuario puede no conocer el código asociado a una determinada opción. Considere la siguiente entrada del estado de EE. state input:

1. <label for=»state»>State:</label>
2. <input type=»text» name=»state» id=»state» list=»state_list»>
3. <datalist id=»state_list»>
4. <option value=»AL»>Alabama</option>
5. <option value=»AK»>Alaska</option>
6. <option value=»AZ»>Arizona</option>
7. <option value=»AR»>Arkansas</option>
8. <!- etc ->
9. </datalist>

Aquí, el usuario verá una lista de nombres de estados completos, pero cuando el usuario haga una selección, la entrada de texto se rellenará con el código del estado en lugar del nombre completo. Un ejemplo se muestra en la Figura 2.


Figura 2. Selección de una opción de la lista de datos con un valor correspondiente (Firefox 18)

El atributo de autocompletar

Si las listas de datos de la Figura 1 y la Figura 2 te resultan familiares, es porque los navegadores tienen implementado el autocompletado desde hace mucho tiempo. Todos los navegadores tienen algún mecanismo de almacenamiento de las entradas de un usuario para utilizarlas posteriormente para el autocompletado.

Los autores pueden utilizar el atributo de autocompletado para controlar si el navegador debe intentar completar automáticamente los datos del usuario. ¡Los posibles valores se muestran en el siguiente ejemplo:

1. <form>
2. <!-
3. Si no se especifica el atributo autocompletar, hereda el valor
4. de su elemento de formulario padre. Si no se especifica, el valor por defecto del atributo autocompletar del
5. formulario es «on». Como ni esta entrada ni su
6. formulario tienen el atributo especificado, se utilizará el estado «on».¡
7. ->
9. <input type=»text» name=»firstName»>
10. <!-
11. El estado «on» indica que el navegador puede recordar el valor para su uso futuro
12. así como sugerir valores previamente almacenados.¡
13. ->
15. <input type=»text» name=»address» autocomplete=»on»>
16. <!-
17. El estado «off» indica al navegador que no almacene el valor introducido para
18. esta entrada ni sugiera los valores introducidos anteriormente. Esto debe ser
19. utilizado si los datos son sensibles o el valor nunca será reutilizado.
20. ->
22. <input type=»text» name=»secret» autocomplete=»off»>

.

23. </form>

Entonces, ¿cuál es la diferencia entre el atributo autocompletar y las listas de datos? El atributo de autocompletar le dice al navegador si debe dar a un usuario opciones para completar basándose en la entrada anterior y si debe almacenar el valor introducido para completarlo en el futuro. Las listas de datos son listas de sugerencias proporcionadas por el autor que siempre se muestran independientemente de la entrada anterior.

Una advertencia es que si se establece el atributo de autocompletar en «off» se evita que las listas de datos se muestren en Opera. Este es un ejemplo:

1. <!-
2. Esta lista de datos nunca se mostrará en Opera porque el atributo de autocompletar
3. está desactivado. Se mostrará en todos los demás navegadores compatibles.
4. ->
6. <input type=»text» list=»pets» autocomplete=»off»>
7. <datalist id=»pets»>
8. <opción>Gato</opción>
9. <option>Perro</option>
10. <option>Hamster</option>
11. <option>Tortuga</option>
12. </datalist>

Otros tipos de entrada

Si bien el autocompletado se asocia tradicionalmente con la entrada textual, las listas de datos también pueden utilizarse en varios de los nuevos tipos de entrada de HTML5. Considere el tipo de entrada de rango, que permite la creación de un elemento de formulario deslizante. Combinando esto con una lista de datos, puede sugerir puntos en el rango al usuario.

Por ejemplo, la siguiente entrada pide al usuario que proporcione una donación entre $5 y $200 dólares.

1. <label for=»donation»>Importe de la donación (USD):</label>
2. <input type=»range» name=»donation» id=»donación» list=»lista_donacion»
3. step=»5″ min=»5″ max=»200″>
4. <datalist id=»donation_list»>
5. <option></option>
6. <option></option>
7. <option></option>
8. <option></option>
9. </datalist>

La Figura 3 y la Figura 4 muestran la visualización de una entrada de rango en Chrome 24 e Internet Explorer 10, respectivamente.


Figura 3. Entrada de rango con lista de datos (Chrome 24)


Figura 4. Entrada de rango con lista de datos (Internet Explorer 10)

Puede ver que cada navegador muestra una marca de verificación para cada opción de lista de datos proporcionada. Además, Chrome ajustará el deslizador a estos valores predefinidos cuando el usuario mueva el deslizador cerca de ellos.

Desgraciadamente, Internet Explorer y Chrome son los únicos navegadores que soportan listas de datos en entradas de rango en este momento. La Figura 5 muestra la compatibilidad de las listas de datos con los tipos de entrada más comunes en los navegadores modernos.


Figura 5. Soporte del navegador para listas de datos en tipos de entrada de formularios

Cuándo usar una lista de datos

Dado que las listas de datos no tienen un mecanismo incorporado para requerir que el usuario seleccione una opción proporcionada, son muy adecuadas para entradas que pueden aceptar cualquier valor. El ejemplo anterior de proporcionar un equipo deportivo encaja aquí. Mientras que la lista de datos sugería equipos, el usuario era libre de introducir cualquier valor.

Por el contrario, el ejemplo del estado de Estados Unidos no supera esta prueba porque hay un conjunto limitado de valores válidos que el usuario debe proporcionar. Este caso de uso se maneja mejor con el elemento select porque fuerza una selección.

Una excepción a esto son las entradas con un gran número de selecciones válidas. Por ejemplo, considere la lista desplegable de países tradicional que se muestra en la Figura 6.


Figura 6. Desplegable de países estándar

Esta lista obstaculiza a los usuarios al obligarles a escudriñar entre cientos de opciones para encontrar la que buscan. Una función de autocompletar se adapta bien a este caso de uso porque un usuario puede filtrar rápidamente la lista escribiendo uno o dos caracteres.

Así es como se puede implementar la selección de países con una lista de datos:

1. <label for=»country»>País:</label>
2. <input type=»text» id=»country» list=»country_list»>
3. <datalist id=»country_list»>
4. <option value=»AF»>Afganistán</option>
5. <option value=»AX»>Islas deÅland</option>
6. <option value=»AL»>Albania</option>
7. <option value=»DZ»>Argelia</option>
8. <!- más ->
9. </datalist>

La figura 7 muestra lo que el usuario verá tras escribir una U.


Figura 7. Un enfoque de lista de datos para el campo de formulario de país

Forzar un valor

Aunque las listas de datos no permiten de forma nativa exigir que se seleccione una opción, puede añadir fácilmente una validación que lo haga. Por ejemplo, el siguiente código hace uso de la API de validación de restricciones de HTML5 para añadir dicha validación:

1. /Encuentra todas las entradas en el DOM que están vinculadas a una lista de datos a través de su atributo de lista.
2. var inputs = document.querySelectorAll(‘input’);
3. for (var i = 0; i < inputs.length; i++) {
4. // Cuando el valor de la entrada cambia…
5. inputs.addEventListener(‘change’, function() {
6. var optionFound = false,
7. datalist = this.list;
8. Determinar si existe una opción con el valor actual de la entrada.
9. for (var j = 0; j < datalist.options.length; j++) {
10. si (this.value == datalist.options.value) {
11. optionFound = true;
12. break;
13. }
14. }
15. // utiliza la función setCustomValidity de la API de validación
16. // para proporcionar una respuesta al usuario si el valor no existe en la lista de datos
17. si (optionFound) {
18. this.setCustomValidity(«);
19. } else {
20. this.setCustomValidity(‘Please select a valid value.’);
21. }

});

22. }

La API de validación de restricciones está implementada en todos los navegadores que soportan datalists, por lo que si el datalist funciona, la validación debería funcionar también. Ahora, cuando el usuario intente enviar un formulario con una entrada que tenga una lista de datos (y no haya seleccionado una opción), verá el error que se muestra en la Figura 8.


Figura 8. Error de la API de validación de restricciones (Internet Explorer 10)

Es importante tener en cuenta que la API de validación de restricciones no elimina la necesidad de la validación del lado del servidor. Los usuarios que trabajen con navegadores antiguos no tendrán disponible la API de validación de restricciones, y los usuarios malintencionados pueden subvertir fácilmente los scripts del lado del cliente.

Aunque este enfoque funciona en los navegadores modernos, presenta una interfaz de usuario inutilizable para los usuarios que ejecutan navegadores que carecen de soporte. A los usuarios se les dice que deben seleccionar un valor válido, pero si su navegador no soporta datalists, no pueden ver las opciones. Por lo tanto, si planea utilizar este enfoque, es esencial proporcionar una interfaz de usuario que funcione en todos los navegadores. Esto puede lograrse detectando si el navegador soporta las listas de datos y luego haciendo el polyfilling apropiado.

Navegadores no compatibles

En el momento de escribir este artículo, las listas de datos para entradas de texto son compatibles con Internet Explorer 10, Firefox 4+, Chrome 20+ y Opera, lo que desafortunadamente deja fuera a un gran número de usuarios.

Al contrario que con muchas de las nuevas características de HTML5, para la mayoría de los casos de uso, no es necesario hacer ningún trabajo extra en los navegadores que no soportan las listas de datos. Por defecto, la lista de opciones que proporciona son meras sugerencias; por lo tanto, los usuarios con navegadores que carecen de soporte simplemente tendrán que rellenar el campo de texto sin ninguna sugerencia.

Sin embargo, se pueden utilizar algunas opciones de reserva para proporcionar una experiencia más completa a los usuarios que ejecutan navegadores no compatibles.

Fallback a contenido HTML alternativo

Una opción, popularizada por Jeremy Keith, es aprovechar el hecho de que los navegadores que no soportan el elemento datalist seguirán mostrando elementos hijos al usuario. A continuación se muestra cómo se puede alterar el ejemplo de la lista de datos de países y pasar a utilizar <select>:

23. <label for=»country»>Country:</label>
24. <datalist id=»country_list»>
25. <select name=»country»>
26. <option value=»AF»>Afganistán</option>
27. <option value=»AX»>Islas deÅland</option>
28. <option value=»AL»>Albania</option>
29. <option value=»DZ»>Argelia</option>
30. <option value=»AS»>Samoa Americana</option>
31. <!- más ->
32. </select>
33. Si es otro, por favor especifique:
34. </datalist>
35. <input type=»text» name=»country» id=»country» list=»country_list»>

La interfaz de usuario que se presenta a los usuarios en los navegadores que soportan datalists no cambiará, pero los usuarios que trabajan con navegadores sin soporte ven ahora un elemento de selección con las opciones de país y un cuadro de texto que pueden utilizar para introducir cualquier valor. Esto se muestra en la Figura 9.


Figura 9: Un Select Fallback para las listas de datos (Internet Explorer 9)

Relleno

Una característica que el select fallback no proporciona es el comportamiento de autocompletar que las listas de datos ofrecen de forma nativa. Si eso es importante para las listas de datos que estás añadiendo, una segunda opción de fallback es polyfill una implementación de listas de datos.

Para empezar, primero necesitas determinar si el navegador del usuario soporta listas de datos. La popular biblioteca de detección de características Modernizr proporciona una prueba de este tipo, como se muestra aquí:

1. si (Modernizr.input.list) {
2. /El navegador soporta el atributo de lista y datalists.
3. } else {
4. //El navegador no admite ni el atributo de lista ni las listas de datos.
5. }

Usando este enfoque, ahora puede polyfill una implementación de listas de datos para los usuarios en los navegadores no compatibles. Aunque hay varios polyfills disponibles para las listas de datos, prefiero usar el widget de autocompletar de jQuery UI. ¡El siguiente código muestra una implementación de polyfill:

1. var datalist,
2. listAttribute,
3. options = ;
4. // Si el navegador no soporta el atributo list…
5. if (!Modernizr.input.list) {
6. // Para cada entrada de texto con un atributo de lista…
7. $(‘input’).each(function() {
8. // Encuentra el id de la lista de datos en la entrada
10. Usando esto, encuentra la lista de datos que corresponde a la entrada.
11. listAttribute = $(this).attr(‘list’);
12. datalist = $(‘#’ + listAttribute);
13. Si la entrada tiene un elemento datalist correspondiente…
14. si (datalist.length > 0) {
15. opciones = ;
16. // Construye la lista de opciones para pasar al widget de autocompletar.
17. datalist.find(‘option’).each(function() {
18. options.push({ label: this.innerHTML, value: this.value });
19. });
20. // Transformar la entrada en un widget de autocompletar jQuery UI.
21. $(this).autocomplete({ source: options });
22. }
23. });
24. // Eliminar todas las listas de datos del DOM para que no se muestren.
25. $(‘datalist’).remove();
26. }

La figura 10 muestra la visualización del ejemplo de la lista de países en Safari con el polyfill de autocompletar de jQuery UI.


Figura 10. Country Datalist Polyfilled Using jQuery UI’s Autocomplete Widget(Safari)

Habrás notado que, por defecto, el widget de autocompletar de jQuery UI coincide con los caracteres de cualquier parte de las opciones, mientras que las listas de datos coinciden con las opciones sólo al principio de la cadena. A diferencia de la lista de datos nativa, el widget de autocompletar permite personalizarlo para que coincida con las opciones como se desee.

El siguiente ejemplo muestra cómo se puede construir una función de autocompletar que coincide con las opciones sólo al principio de la cadena:

1. <input type=»text» id=»autocompletar»>
2. <script>
3. var opciones = ;
4. $(‘#autocomplete’).autocomplete({
5. // req contendrá un objeto con una propiedad «term» que contiene el valor
6. // actualmente en la entrada de texto. responseFn debe ser invocado con las opciones
7. // para mostrar al usuario.
8. Fuente: function (req, responseFn) {
9. Escapar cualquier carácter significativo de RegExp como «.», o «^» del
10. Término tecleado.
11. Var term = $.ui.autocomplete.escapeRegex(req.term),
12. // ‘^’ es el carácter RegExp que debe coincidir al principio de la cadena.
13. // ‘i’ le dice al RegExp que haga una coincidencia sin distinguir mayúsculas y minúsculas.
14. matcher = new RegExp(‘^’ + term, ‘i’),
15. // Hace un bucle sobre las opciones y selecciona sólo las que coinciden con el RegExp.
16. matches = $.grep(options, function (item) {
17. return matcher.test(item);
18. });
19. // Devuelve las opciones coincidentes.
20. responseFn(matches);
21. }
22. };
23. </script>

Versiones más antiguas de Internet Explorer

Para que cualquier polyfill del elemento datalist funcione en versiones más antiguas de Internet Explorer, es necesario realizar dos pasos adicionales.

Elementos de opción

El primero es que las versiones de Internet Explorer 9 y anteriores requieren que los elementos de opción sean hijos inmediatos de los elementos de selección. Si no lo son, estas versiones no los reconocen, y no serán visibles para el polyfill.

Por suerte, esto es fácil de solucionar. Utilizando comentarios condicionales, puede colocar un elemento de selección alrededor de las opciones sólo para estas versiones de Internet Explorer. ¡Consulte este ejemplo:

1. <datalist>
2. <><select><<>
3. <option>Apple</option>
4. <option>Banana</option>
5. <option>Cereza</option>
6. <!- ¡etc ->
7. <><select><<>
8. </datalist>

Internet Explorer versión 9 y anteriores detectarán ahora las opciones adecuadamente. Internet Explorer 10 no se verá afectado ya que los comentarios condicionales se eliminaron del analizador sintáctico en Internet Explorer 10. Todos los demás navegadores también ignorarán los comentarios.

HTML5 Shiv

En Internet Explorer versión 8 y anteriores, los elementos desconocidos no pueden contener hijos. Por lo tanto, incluso si los elementos de opción de una lista de datos están dentro de elementos de selección, seguirán sin ser reconocidos.

Afortunadamente, también hay una solución fácil para este problema. La popular librería HTML5 Shiv permite que elementos desconocidos para Internet Explorer 6-8 tengan hijos. Este shiv se incluye por defecto en Modernizr; simplemente asegúrese de que la casilla «html5shiv» está seleccionada cuando configure su descarga.

Limitaciones de las listas de datos

Aunque las listas de datos son perfectas para añadir sugerencias a las entradas de texto, adolecen de una falta de capacidades de personalización que muchas aplicaciones web modernas requieren. Por ejemplo, no se puede hacer lo siguiente con las listas de datos:

• Utilizar CSS para cambiar su visualización o la de sus opciones.
• Controlar el posicionamiento de la lista.
• Controlar el número de caracteres escritos antes de que el navegador muestre los resultados al usuario.
• Controlar lo que se considera una coincidencia (sensibilidad a las mayúsculas y minúsculas, coincidencia al principio de la cadena frente a cualquier lugar, etc.).
• Atar la entrada a una fuente de datos del lado del servidor.

Esto significa que si necesita alguna de estas funcionalidades, necesita buscar una solución de autocompletar más robusta. El widget de autocompletar de jQuery UI proporciona la capacidad de hacer todo esto y más. El widget de autocompletar también es compatible con todos los navegadores hasta Internet Explorer 7 sin necesidad de un polyfill. Para obtener más información sobre el widget de autocompletar, consulta sus demostraciones y la documentación de la API. (El widget de autocompletar sólo maneja entradas basadas en texto, por lo que no podrá ayudarle con algunos de los tipos de entrada más especializados, como el rango y el color.)

Resumiendo

Los catalizadores proporcionan un medio rápido y nativo de mostrar sugerencias de entrada al usuario. Dado que las opciones son simplemente sugerencias, para muchas situaciones no es necesario proporcionar un fallback para los navegadores no compatibles; los usuarios de estos navegadores simplemente no verán las sugerencias.

Para las situaciones en las que sí desea proporcionar una lista de datos funcional a todos los usuarios, puede detectar la compatibilidad y polyfill la funcionalidad para los navegadores que carecen de soporte.

Aunque las listas de datos son grandes para ofrecer sugerencias, son limitadas en la funcionalidad que proporcionan. Si necesitas una solución de autocompletado más robusta, el widget de autocompletado de jQuery UI es un buen lugar para empezar.