Posts etiquetados ‘programación’

He decidido compartir con vosotros un ejercicio que suelo poner a mis alumnos de JavaScript. Se trata de implementar el típico mensaje de autosugerencia cuando escribimos algo en una entrada de texto destinada a tal fin. Vamos a comenzar creando un archivo HTML que puedes llamar como quieras, aunque en mi caso le he llamado index.html para seguir la costumbre ya que se trata del punto de entrada. Si estás usando un IDE como Aptana, Dreamweaver o cualquier otro, crea un nuevo proyecto y añade este archivo. Si eres de los que prefiere hacer las cosas “a pelo”, pues crea el archivo en el mismo escritorio y solucionado.
Bien, vamos allá. Escribimos en el susodicho archivo lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Autosugerencia</title>
</head>

<body>

Escribe una palabra: <input type="text" id="palabra"/>

<ul id="suggest"></ul>

</body>

<script type="text/javascript" src="js/autosugerencia.js"></script>

</html>

Simplemente, como podemos ver, este archivo contiene un campo de entrada de texto con el id palabra, y una lista desordenada vacía con el id suggest. Al final, antes del cierre de la etiqueta HTML, cargamos el JavaScript que se encargará de todo dentro de una carpeta llamada js. Al archivo le he llamado autosugerencia.js, tú puedes llamarle como quieras, siempre y cuando en el paso siguiente crees ese archivo con el mismo nombre. Con solo esto en el HTML es con lo que vamos a trabajar.
Ahora creamos una carpeta llamada js y dentro un archivo llamado autogerencia.js en mi caso o, como ya he advertido, con el nombre que hayas decidido ponerle en el HTML. Entonces, una vez creado, escribimos el siguiente código:

// JavaScript Document

var palabras = ["enero", "febrero", "marzo", "abril", "mayo", "junio",
				"julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];

document.getElementById("palabra").addEventListener("keyup", autosugerir, false);

function autosugerir(){

	var contador = 0;

	var escribiendo = document.getElementById("palabra").value.toLowerCase();

	document.getElementById("suggest").innerHTML="";

		if (escribiendo != ""){

			var caracteres = escribiendo.length;

			for (x=0; x < palabras.length; x++){

				var pArray = new String(palabras[x]);

				var sugerencia = pArray.substring(0,caracteres);

				if (sugerencia == escribiendo){

					contador++;
					var ul = document.getElementById("suggest");
					var new_li = document.createElement('li');
					new_li.className = pArray;
					new_li.style.cursor = "pointer";
					new_li.innerHTML = "Quizás quiso decir " + pArray;
					ul.appendChild(new_li);
					new_li.addEventListener("click", aceptar, false);

				}

			}

			if (contador == 0){

				var ul = document.getElementById("suggest");
				var new_li = document.createElement('li');
				new_li.innerHTML = "No hay sugerencias";
				ul.appendChild(new_li);

			}

		}

		else {

			var ul = document.getElementById("suggest");
			var new_li = document.createElement('li');
			new_li.innerHTML = "No hay sugerencias";
			ul.appendChild(new_li);

		}

}

function aceptar(){

		document.getElementById("suggest").innerHTML="";
		var palabraSeleccionada = this.className;
		var cajaTexto = document.getElementById("palabra");
		cajaTexto.value = palabraSeleccionada;

}

Veamos el código paso a paso.
Lo lógico sería que toda la información que va a ser auto sugerida fuera suministrada por una base de datos pero, para no complicar el ejemplo, vamos a hacerlo desde un array. Eso es precisamente lo que hacemos al comienzo, declarar un array que contiene los meses del año. Acto seguido vinculamos un listener en tiempo de ejecución al campo de texto donde el usuario irá escribiendo. Como vemos, al método addEventListener encargado de ello, se le pasan tres argumentos. El primero es el tipo de evento, el segundo la función destino que se ejecutará cuando el evento se produzca, y el tercero es un argumento booleano opcional. Si es true, todos los eventos del tipo especificado serán lanzados al listener registrado antes de comenzar a ser controlados por algún EventTarget que esté por debajo en el arbol DOM del documento.
Como vemos, el evento que vamos a “escuchar” es el keyup, es decir, cuando el usuario termine de pulsar una tecla. La función de llamada será autosugerir, y el último argumento lo ponemos a false, ya que no queremos que reaccione como hemos explicado hace un momento.
Hasta ahora lo único que tenemos son los datos para sugerir y un escuchador de eventos que estará alerta vigilando cuándo se pulsa una tecla sobre el campo de texto de nuestro HTML.
Bien, veamos ahora qué hace la función autosugerir que es la que va a realizar todo el trabajo. Primero iniciamos una variable contador a cero, después guardamos en la variable escribiendo el resultado de capturar el contenido del campo de texto y convertirlo directamente a minúsculas con la función de JavaScript toLowerCase(). Para asegurarnos que la lista desordenada se encuentra vacía, lo hacemos en la siguiente línea. Ahora, con el condicional, comprobamos que la variable escribiendo no esté vacía, es decir, que haya algún dato en el campo de texto. Si lo hay, guardamos en la variable caracteres la longitud de caracteres, valga la redundancia, de lo que haya escrito en el campo de texto. Seguidamente, con el bucle for, vamos a iterarnos desde cero hasta el total de elementos contenidos en nuestro array. Dentro de este bucle es donde se haya el meollo de la cuestión. Veamos.
Lo primero es guardar en la variable pArray el elemento del array situado en la posición x (variable que, como sabemos, ira aumentando en cada iteración y que comienza por cero). Después, en la variable sugerencia, guardamos el resultado de substraer del contenido de nuestra variable pArray (que, recordemos, contendrá un elemento del array distinto en cada iteración) los caracteres que existan entre cero y el total de caracteres escritos por el usuario hasta ese momento, que ya guardamos anteriormente en la variable caracteres. En el condicional comprobamos si existe alguna coincidencia entre el trozo que hemos obtenido del elemento de nuestro array y lo que haya escrito el usuario. Si es así, aumentamos la variable contador en uno (ya veremos para qué), capturamos la lista desordenada de nuestro HTML en la variable ul y creamos en tiempo de ejecución una etiqueta HTML li en nuestra variable new_li. A continuación le añadimos un nombre de clase que hacemos igual a lo que contenga en ese momento nuestra variable pArray, le añadimos un estilo de cursor y un texto que mostrará la sugerencia obtenida. Para que la etiqueta li creada en tiempo de ejecución pueda aparecer en el HTML, debemos añadirla con appendChild a nuestra lista desordenada. Finalmente, añadimos un listener a la etiqueta li que controlará el evento click sobre cualquiera de ellas y disparará la función aceptar que veremos en un momento. Como ya he comentado, en este bucle for se encuentra la lógica más importante del programa y hará que se muestren todas y cada una de las coincidencias encontradas entre lo que escribamos y nuestro array.
Después del bucle for vemos otro condicional que comprueba si la variable contador es igual a cero. Si recordamos, esta variable la inicializamos así al comienzo de nuestra función. Esto nos sirve para controlar si se ha encontrado alguna sugerencia o no dentro del bucle for, ya que, como hemos visto, la variable va sumando uno cada vez que se encuentra con una coincidencia. Si no es así, la variable seguirá valiendo cero y, por lo tanto, mostramos un mensaje de ello al usuario a través de una etiqueta li creada en tiempo de ejecución y que añadimos a nuestra lista desordenada en el HTML. También, en el else del if contenedor, mostramos lo mismo si la variable escribiendo se encuentra vacía (esto ocurrirá si el usuario escribe algunos caracteres y, posteriormente, decide borrarlos todos). Con esto tenemos visto toda la función autosugerir completa.
Al final del archivo nos encontramos con la función aceptar vinculada a cada una de las etiquetas li que se creen en tiempo de ejecución. Con esto haremos que si un usuario desea aceptar cualquier sugerencia mostrada haciendo clic sobre ella, se muestre automáticamente en el campo de texto. Como vemos, vaciamos la lista desordenada, guardamos en la variable palabraSeleccionada el nombre de la clase que tenga la etiqueta y que, a su vez, será igual al elemento del array, capturamos en la variable cajaTexto el campo de texto de nuestro HTML y, finalmente, le asignamos el valor de la variable palabraSeleccionada.
Y con esto ya lo tenemos.
Ahora podemos probarlo y si, por ejemplo, escribimos solo la letra m en nuestra entrada de texto, veremos como mágicamente aparecen las sugerencias de los meses marzo y mayo.
Como dije al principio, lo suyo es que la fuente de datos se encuentre en una BD y que, además, obtengamos esos datos mediante Ajax. Teniendo este código como punto de partida no es demasiado complicado implementarlo.
Pero eso lo dejo para vosotros 🙂
Espero que os haya gustado y os sea de utilidad.

Anuncios