Lista de coincidencias con AJAX

Tengan un buen día. Lamento la ausencia de posts durante estos días, pero gracias a Dios aquí les traigo otro de mis pininos en el mundo de AJAX. Y este es, acerca de como crear una lista de coincidencias, así como cuando, para los que tienen cuenta en gmail, cuando van a redactar un mensaje y están escribiendo la dirección de correo, les aparece un cuadro donde aparecen todos los correos que comparten un patrón de coincidencia con la el correo que usted está escribiendo. En ese caso, se utiliza la tectnología, o mejor dicho, el conjunto de tecnologías conocido como AJAX, y JavaScript, para hacer lo siguiente:

Digmamos que voy a mandar un correo a princesa_zkarleth@hotmail.com, entonces digito "prin" y en seguida en la parte de abajo del campo de texto aparece un cuadro con todos los correos electrónicos de nuestros contactos que empiezan con "prin", se selecciona el deseado y listo!! Bastante práctico, para no escribir tanto.

En este caso, al digitar texto, mediante el evento onKeyUp, se manda a llamar una función que usa AJAX para realizar la solicitud a la base de datos donde se guardan nuestros contactos para recopilar todos aquellos cuyos correos empiezen con la cadena que digitamos en el campo de texto, luego los devuelve a la página sin necesidad de haberse actualizado esta, luego justo abajo del campo de texto, usando javascript se crea un cuadro el cual se rellena de la "respuesta" que nos envia el servidor, que digamos, es un arreglo con los correos que coinciden, luego si el usuario da click a un elemento del cuadro, con un evento se activa una función que toma el valor que el usuario seleccionó y lo "pega" en el campo de texto y ahi está.



Y cuando ví esto, me dieron ganas de intentarlo, pero, francamente, no domino bien JavaScript, por lo que decidí hacerlo (bueno, incompleto, ya veran porque) pero no creando un cuadro con JavaScript, sino que creando un listbox dinámicamente y asíncronamente con las coincidencias. Para ello me auxilié del agradable lenguaje del lado del servidor PHP así como la base de datos MySQL, ya que les explicaré como funciona el script que hice:

Hay una página con un cuadro de texto, en el cual yo voy digitando un nombre, entonces cada vez que digito o borro un caracter, usando el evento onkeyUp, hago una llamada asíncrona con AJAX para llamar a un script PHP al que también le mando la cadena que he escrito en el cuadro de texto para que cree una consulta SQL para buscar todos los nombres que compartan un patrón con la cadena del cuadro de texto, y luego dicha consulta se hace a una base de datos MySQL para obtener todos los nombres coincidientes, luego con dicha lista de nombres, dinamicamente en el script PHP creo un listbox rellenandolo con dichos nombres, y finalmente el resultado del script, que es el listbox con las coincidencias, se carga en un div que hay en la pagina inicial que se manda en la respuesta a la petición AJAX.

Eso si, hay un pequeño inconveniente, y es lo que les dije que está incompleto, y es que en teoría, cuando aparezca el listbox, y yo de click en un nombre, automaticamente ese nombre se inserte en el cuadro de texto, pero, francamente no he podido aun, así que yo les doy el código y la db en mysql, pero lamentablemente no pude hacer eso, así que si alguien lo logra hacer le agradecería como favor que pudiera postearlo para compartirlo con todos los que visitan mo blog, pero ojo, utilizando el listbox, porque usando el metodo que les dije, creando un cuadro con JavaScript si he podido.

A continuación les pongo un video que grabé para mostrarles mas o menos como funciona, espero que se vea algo bien.

Y pueden descargar este paquetito que contiene:
-Base de datos MySQL usada en el ejemplo (NOTA: Solo necesitan ejecutar el archivo.sql en su servidor MySQL, ya que me tomé la molestia de agregarle el código para crear la base de datos, la tabla, los datos y tambien el usuario con permisos para esta base de datos que utiliza el script PHP para conectarse).
-Script PHP que crea el listbox
-Script JavaScript que contiene el código para la solicitud asíncrona (AJAX) XD
-Página html en donde se visualizan los resultados.
-Video que esta en youtube pero con mayor calidad.

>>Descarga el paquete aquí<<

Si acaso necesitan alguna pequeña explicación acerca de alguno de los scripts pueden solicitarla mediante los comentarios del blog para postear una expliacion de lo que necesiten. Por ahora, espero que les sirva de mucho.