Una de las formas más comunes hoy, es llamar a consultas ocultas sin refrescar la página. Esta parte del proceso se puede hacer con código Javascript, para este ejemplo solo hecho en html y con unos datos en código será suficientes para abordar después el empleo del framework Ayaxpro en nuestra apllicación.

Lo primero es el uso de una forma de captura y su respectiva etiqueta sobre lo que se refiere, se supone, a partir de la primera letra escrita debe autosugerirnos varias opciones, tal como lo hacen las aplicaciones como el buscador de yahoo.La siguiente parte será creada en la página Hhml de trabajo, solo expongo la parte escencial, sabemos que hay más código, por el momento esto es lo importante.

Teclee un email que empiece con g

Lo segundo es crear un arreglo de datos que podamos mostrar, ese arreglo estará en el código de Javascript para efectos de este ejemplo y después emplearlo en aplicaciones con ayax en C# u otro lenguaje dado esta parte es universal.

var emailAddresses = [
"greenarrow@justiceleague.xmp",
"greenflame@justiceleague.xmp",
"greenhornet@dccomics.xmp",
"greenlantern@justiceleague.xmp",
"magneto@example.net",
"mistermiracle@justiceleague.xmp",
"redronin@sitepoint.com",
"redtornado@justiceleague.xmp"
];

Posteriormente creamos nuestra función autocomplete en javascript, en esta parte obtenemos el elemento de la forma previamente creado en la página HTML

var email = document.getElementById("email");
email.setAttribute("autocomplete", "off");
attachEventListener(email, "keydown", keydownAutoComplete, false);
attachEventListener(email, "blur", blurAutoComplete, false);
return true;

En este mismo código Javascript debemos incluir una función que implique el uso de las teclas una vez situados en las formas, bien cuales teclas hay que considerar pues son estas:

case 8: // backspace
case 9: // tab
case 13: // enter
case 16: // shift
case 17: // ctrl
case 18: // alt
case 20: // caps lock
case 27: // esc
case 33: // page up
case 34: // page down
case 35: // end
case 36: // home
case 37: // left arrow
case 39: // right arrow
case 38: // up arrow
case 40: // down arrow
case 46: // delete

Solo haremos énfasis de las teclas arriba y abajo para para selccionar la opcion, las demas por mientras no nos interesa hagan algo, entonces parte importante de la funcionalidad está en los casos de las teclas 38 y 40 que servirán para acentuar la opcion recorrida por la tecla entre otras cosas.

Siguiente paso debe crearse un función de para generar una cortina con las opciones consultadas y marcada con otro color la opción escogida.

En esta parte nuevamente tomamos el elemento de la forma de entrada, y crearemos otro elemento al vuelo y lo configuraremos , para finalmente agregarlo como elemento hijo del que tomamos originalmente esto con el fin de crear la cortina justo bajo el elemento de la forma.

var input = document.getElementById("email");

var newUl = document.createElement("ul");
newUl.setAttribute("id", "autoCompleteDropdown");
newUl.autoCompleteInput = input;
newUl.style.position = "absolute";
newUl.style.left = getPosition(input)[0] + "px";
newUl.style.top = getPosition(input)[1] + input.offsetHeight - 2 + "px";
newUl.style.width = input.offsetWidth - 3 + "px";

Finalmente crar otras funciones entre ellas las desaparecer la cortina de elementos, removiendo el elemento adjunto al de la forma original.


var autoCompleteDropdown = document.getElementById("autoCompleteDropdown");

if (autoCompleteDropdown != null)
{
autoCompleteDropdown.parentNode.removeChild(autoCompleteDropdown);
}

Una parte muy importante esta dada por el código de CSS , crear los estilos para cada elemento por ejemplo:

#autoCompleteDropdown

Y asi cada uno, de cualquier forma pensarás que bién todo esto pero sin el código completo son ideas perdidas e inconexas, he aquí la solución.

O tambien Archivo js.
Archivo Css.