Caja de texto con autocompletado

Cada día son mayores las facilidades que ofrecen las páginas web para que el usuario se esfuerce lo menos posible. Una de ellas es el autocompletado de las cajas de texto, según se vaya escribiendo te aparece una lista con las posibles opciones o con sugerencias. Es lo que usa Google cuando te va mostrando lo más buscado.

A primera vista parece complicado, pero como se va a ver no lo es tanto, eso sí, quizás tiene varias cosas que hay que tener en cuenta, lo que lo convierte en un script un poco largo.

Mostrar resto >>

<< Ocultar resto
Primero vamos con el diseño, son necesarias tres partes, la caja de texto <INPUT type="text" ...>, una capa que irá debajo de la caja de texto que es la que mostrará las sugerencias y un botón, en este caso una imagen, que servirá para desplegar la lista con todos los valores.
Lo único destacable del diseño es que la lista debe ser una capa con estilo position: absolute y debe ir dentro de otra con estilo position: relative, para que "flote" por encima del texto que se encuentre debajo de la caja de texto.

<input type="text" id="input-fill" autocomplete="off"     onkeyup="inputFilling(event, this)"     onblur="setInput(this, document.getElementById('lista'))">     &nbsp; <img src="abajo.gif" border="0"     onmouseover="cambiarImagen(this, true)"     onmouseout="cambiarImagen(this, false)" class="boton"     onclick="despliegaFilling(document.getElementById('input-fill'), datos, document.getElementById('lista'))"     title="Importar"><div class="contenedor"><div id="lista"     class="fill"></div></div>

Si nos fijamos tanto en la caja de texto como en la imagen, veremos que hay varios eventos que debemos tener en cuenta: en la caja de texto cuando se pulsa una tecla muestra la lista con las coincidencias y cuando se pierde el foco se debe escribir en la caja el texto seleccionado de la lista de coincidencias. En la imagen hay que desplegar la lista con todas las posibilidades. Una cosa a tener en cuenta es que la caja de texto debe tener el atributo autocomplete con valor off para que el navegador no actue sobre ella.
Las acciones que se deben tener en cuenta son las siguientes:

• Se pulsa una tecla en la caja de texto (usamos el evento onkeyup para no tener problemas con los cursores) y dependiendo de la tecla:
• si la tecla es el cursor hacia la izquierda o hacia la derecha, no hago nada y no dejo que se modifique el texto, volviendo a sobreescribirlo
• si la tecla es el cursor hacia arriba, selecciono el inmediato superior al seleccionado en ese momento en la lista de coincidencias
• si la tecla es el cursor hacia abajo, selecciono el inmediato inferior al seleccionado en ese momento en la lista de coincidencias
• si la tecla es la de retroceso, dejamos que borre el texto seleccionado (hay que tener en cuenta tambien que dentro de la caja habrá una parte del texto que estará seleccionado, que coincidirá con la diferencia de la opción seleccionada y el texto escrito por el usuario)
• si la tecla es la de retorno de carro, deseleccionamos en texto (quedará la opción seleccionado) y eliminamos la lista
• en otro caso, escribimos la letra pulsada
• después de tratar la tecla pulsada, calculamos la lista de opciones y la dibujamos dentro de una tabla
• si pinchamos en una opción de la lista, la escribimos en la caja y ocultamos la lista

La lista de opciones se obtendrán de un array, claro que se podría obtener usando AJAX.
La función que trata la pulsación de las teclas y despliega la lista con las coincidencias es la siguiente, la cual recibe dos parámetros, el objeto event y el elemento que contiene la lista:

    // Muestra las coincidencias en la lista     function inputFilling(evt, obj) {         var elems = datos;         var fill = document.getElementById('lista');         var tecla = "";         var lista = new Array();         var res = obj.value;         var borrar = false;                  // Almaceno la tecla pulsada         if (!IE) {          tecla = evt.which;         } else {          tecla = evt.keyCode;         }                  var texto;         // Si la tecla que pulso es una         // letra o un espacio, o el intro         // o la tecla borrar, almaceno lo         // que debo buscar         if (!String.fromCharCode(tecla).match(/(\w|\s)/) &&                 tecla != 8 &&                 tecla != 13) {             texto = textoAnt;         } else {             texto = obj.value;         }                  textoAnt = texto;                  // Si el texto es distinto de vacio         // o se pulsa ARRIBA o ABAJO         // creo una lista con las palabras         // que coinciden con lo que hay         // escrito en la caja         if ((texto != null && texto != "")             || (tecla == 40 || tecla == 38)) {             for (var i=0; i<elems.length; i++) {                 if (elems[i].toUpperCase().indexOf(                         texto.toUpperCase()) == 0) {                     lista[lista.length] = elems[i];                 }             }         }                           // Según la letra que se pulse         if (tecla == 37) { // Izquierda             // No hago nada         } else if (tecla == 38) { // Arriba             // Subo la posicion en la             // lista desplegable una posición             if (posicionListaFilling > 0) {                 posicionListaFilling--;             }             // Corrijo la posición del scroll             fill.scrollTop = posicionListaFilling*14;         } else if (tecla == 39) { // Derecha             // No hago nada         } else if (tecla == 40) { // Abajo             if (obj.value != "") {                 // Si no es la última palabra                 // de la lista                 if (posicionListaFilling < lista.length-1) {                     // Corrijo el scroll                     fill.scrollTop = posicionListaFilling*14;                     // Bajo la posición de la lista                     posicionListaFilling++;                 }             }         } else if (tecla == 8) { // Borrar <-             // Se sube la lista del todo             posicionListaFilling = 0;             // Se permite borrar             borrar = true;         } else if (tecla == 13) { // Intro             // Deseleccionamos el texto             if (obj.createTextRange) {                 var r = obj.createTextRange();                 r.moveStart("character",                     obj.value.length+1);                 r.moveEnd("character",                     obj.value.length+1);                 r.select();             } else if (obj.setSelectionRange) {                 obj.setSelectionRange(                     obj.value.length+1,                     obj.value.length+1);             }             // Ocultamos la lista             fill.style.display = "none";             // Ponemos el puntero de             // la lista arriba del todo             posicionListaFilling = 0;             // Controlamos el scroll             fill.scrollTop = 0;             return true;         } else {             // En otro caso que siga             // escribiendo             posicionListaFilling = 0;             fill.scrollTop = 0;         }                      if (lista.length == 0) {             // Si la lista es vacia no la mostramos             fill.style.display = "none";         } else {             // Creamos una tabla con             // todos los elementos encontrados             fill.style.display = "block";             var html='<table cellspacing="0" '+                 'cellpadding="0" border="0" width="100%">';             for (var i=0; i<lista.length; i++) {                 html += '<tr id="tr'+obj.id+i+                     '" '+(posicionListaFilling == i?                         ' class="fill" ': '')+                     ' onmouseover="seleccionaFilling(\'tr'+                     obj.id+'\', '+i+                     ')" onmousedown="seleccionaTextoFilling(\'tr'+                     obj.id+'\', '+i+')">';                 html += '<td>'+lista[i]+'</td></tr>';             }             html += '</table>';         }                      // Escribimos la lista         fill.innerHTML = html;                  // Si no se ha borrado         if (!borrar) {             if (lista.length != 0) {                 // Seleccionamos la parte del texto                 // que corresponde a lo que aparece                 // en la primera posición de la lista                 // menos el texto que realmente hemos                 // escrito                 obj.value = lista[posicionListaFilling];                 if (obj.createTextRange) {                     var r = obj.createTextRange();                     r.moveStart("character",                         texto.length);                     r.moveEnd("character",                         lista[posicionListaFilling].length);                     r.select();                 } else if (obj.setSelectionRange) {                     obj.setSelectionRange(                         texto.length,                         lista[posicionListaFilling].length);                 }             }         }         return true;     }

Una función muy similar es la que se encarga de desplegar la lista cuando se pulsa el botón

    // Despliega todos los elementos     // en la lista     function despliegaFilling(obj, elems, fill) {                  var lista = new Array();         var res = obj.value;                  var texto="";                  // Creamos la lista         for (var i=0; i<elems.length; i++) {             if (elems[i].toUpperCase().indexOf(                     texto.toUpperCase()) == 0) {                 lista[lista.length] = elems[i];             }         }                  textoAnt = "";                  if (lista.length == 0) {             // Si no hay datos no la mostramos             fill.style.display = "none";         } else {             // Creamos una tabla             // con todos los elementos             // de la lista             fill.style.display = "block";             var html='<table cellspacing="0" '+                 'cellpadding="0" border="0" '+                 'width="100%">';             for (var i=0; i<lista.length; i++) {                 html += '<tr id="tr'+obj.id+i+                     '" '+(posicionListaFilling == i?                             ' class="fill" ': '')+                     'onmouseover="seleccionaFilling(\'tr'+obj.id+                     '\', '+i+')" onmousedown="seleccionaTextoFilling(\'tr'+                     obj.id+'\', '+i+')">';                 html += '<td>'+lista[i]+'</td></tr>';             }             html += '</table>';         }                  // Escribimos la lista         fill.innerHTML = html;                  // Seleccionamos el texto         if (lista.length != 0) {             obj.value = lista[posicionListaFilling];             if (obj.createTextRange) {                 var r = obj.createTextRange();                 r.moveStart("character",                     texto.length);                 r.moveEnd("character",                     lista[posicionListaFilling].length);                 r.select();             } else if (obj.setSelectionRange) {                 obj.setSelectionRange(                     texto.length,                     lista[posicionListaFilling].length);             }         }                  obj.focus();     }

Y por último, necesitaremos otras funciones para ayudar en la funcionalidad

    // Introduce el texto seleccionado     function setInput(obj, fill) {         obj.value = textoAnt;         fill.style.display = "none";         posicionListaFilling = 0;     }     // Cambia el estilo de     // la palabra seleccionada     // de la lista     function seleccionaFilling(id, n) {         document.getElementById(id +             n).className = "fill";         document.getElementById(id +             posicionListaFilling).className = "";         posicionListaFilling = n;     }     // Pasa el texto del filling a la caja     function seleccionaTextoFilling (id, n) {         textoAnt = document.getElementById(id +             n).firstChild.innerHTML;         posicionListaFilling = 0;     }

Si quieres intentar tú hacer algo parecido, te lo recomiendo, no es complicado, si te aconsejo que vayas introduciendo funcionalidades poco a poco, si no, si que podrá resultar bastante complicado.
Puedes bajarte aquí un ejemplo: ARCHIVO