Estamos a sábado, hoy no quiero hablar de algo muy espeso ni complicadito ya que como es de entender, los fines de semana la maquinaría se relaja. Este es otro de esos post de relleno que lejos de aportar paja, intenta enseñar algo, por muy poquito que sea, pero que os da las claves para que a partir de esto se puedan desarrollar cosas mas complejas.

En este artículo quiero hablar de una de las nuevas características que nos ofrece HTML5. Y no es otra que de las datalist, que pueden ser fácilmente utilizadas en cuadros de texto para arrojar resultados a medida que vamos escribiendo.

Tengo que reconocer que esta funcionalidad es una de esas a las que le tengo manía y no porque no sea útil sino porque cuando he tenido que implementarla en algún proyecto me ha dado mucha pereza programarla y mira que es una tonteria peeeeero…

Vale que existen plugins para jQuery que te permiten hacerlo de una manera muy cómoda, pero la manera tradicional de hacer esto era con eventos de teclado, llamadas ajax y consultas a la base de datos.
Así pues, el programador tenía que capturar el evento keyup del teclado y sacar el valor de la caja de texto para así enviarlo por ajax a un php que con la cadena de texto obtenida hiciera una consulta a la base de datos para ver si nos devolvía algún resultado y con suerte devolver un json con los datos serializados para montar la vista.

Dependiendo de que es lo que queremos hacer con los datos devueltos tendríamos que añadir mas o menos complejidad al asunto, pero la idea básica es la siguiente.

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo buscador de animales</title>
		<script src="jquery-2.1.1.min.js"></script>
	</head>
	<body>
		Buscar un animal: <input type="text" id="caja"/>
	</body>
</html>

<script type="text/javascript">
	$(document).ready(function(){
		var consulta = null;
		$("#caja").on("keyup",function(){
			$.ajax({
                type: 'post',
                cache: "true",
                dataType: 'html',
                beforeSend: function(){
                    consulta = $('#caja').val();
                },
                data: JSON.stringify(consulta),
                url: "resultados.php",
                success: function(data){
                    /* TODO */
                }
            })
		});
	});
</script>

Como veis, esto produce una cantidad innecesaria de llamadas a la base datos. Con los datalist de html5 podemos optimizar el rendimiento mejorando la experiencia del usuario.
Estos datalist nos permiten definir el contenido de los cuadros de texto tal y como lo haríamos con los select mediante los elementos de tipo option.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-2.1.1.min.js"></script>
</head>
	<body>
	Buscar un animal: <input type="text" list="animales" id="caja"/>
	<datalist id="animales">
	    <option label="Carnivoro" value="Perro" data-id="1"/>
	    <option label="Herbivoro" value="Caballo" data-id="2"/>
	    <option label="Carnivoro" value="Oso" data-id="3"/>
	    <option label="Carnivoro" value="Mapache" data-id="4"/>
	    <option label="Herbivoro" value="Reno" data-id="5"/>
	</datalist>
	</body>
</html>

La idea básica de esto sería hacer que el servidor nos devolviera el contenido de este input en json y montarlo todo en la vista.

Soporte en navegadores

Este control podemos utilizarlo de una manera fiable en casi todos los navegadores excepto en Safari. En concreto, esta soportado por los siguientes navegadores:

De todas maneras hay una opción para los navegadores que no soportan los datalist y es mediante el control select. La opción habitual es sustituirlo para que los usuarios puedan elegir simplemente desde una lista. Para ello bastaría con anidarlo dentro con las opciones completas, su value y el texto a mostrar.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-2.1.1.min.js"></script>
</head>
	<body>
	Buscar un animal: <input type="text" list="animales" id="caja"/>
	<select id="animales">
	    <option value="Perro" data-id="1">Perro</option>
            <option value="Caballo" data-id="2">Caballo</option>
            <option value="Oso" data-id="3">Oso</option>
            <option value="Mapache" data-id="4">Mapache</option>
            <option value="Reno" data-id="5">Reno</option>
	</select>
	</body>
</html>

El problema de esta solución es que se mostrarán los dos controles, el cuadro de texto y la lista desplegable, cosa que queda bastante fea de cara al usuario y puede hacer incluso que se malinterpreten los datos.

De todas maneras, no nos vamos a librar en cualquier caso de tener que validar los datos recibidos en el servidor ya que los datalist no aportan nada a la seguridad, tan solo es una ayuda visual que mejora la usabilidad y experiencia de la web, tened eso siempre presente.

Y con esto termina el artículo sobre el datalist, elemento que ayuda mucho pero que por desgracia no podemos estirar mas en la explicación de su uso ya que donde no hay mata…

¡Hasta que volvamos a olernos!

Era mi blog y me lo follaba como quería

datalist

Datalist: Autocompletar en HTML5 sin Ajax y sus ventajas

Soporte en navegadores