Autocompletar (suggest) con AJAX - ejemplo práctico

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :)

Instrucciones

En el input de la izquierda se pueden agregar palabras a la base de datos del autocompletador. Escribir alguna y presionar el botón "Ingresar" y esperar el mensaje de confirmación.
En el input derecho al escribir dos letras o más (no buscará sugerencias al tipear sólo una letra) se desplegará una lista con 20 sugerencias (o menos, dependiendo de la cantidad de coincidencias en BD) para completarla. Se puede navegar por el listado con el mouse o con las flechas abajo/arriba del teclado y clickear o presionar enter en cualquier sugerencia.

Funcionamiento

Se trata de un script que no accede a la BD con cada tecla presionada. Solo accede cuando lo cree necesario siguiendo las pautas siguientes:

  • Si se agrega un nuevo caracter al input, se determina si la anterior busqueda arrojó resultados que no se pudieron mostrar debido al límite existente de cantidad de coindidencias a mostrar. En ese caso, con la nueva búsqueda se regresará a la BD y se traerá esos nuevos resultados. En caso contrario, no se regresa a BD y se filtran los elementos de la lista puramente desde JavaScript (eliminando sugerencias no coincidentes y resaltando con negrita las palabras).
  • Si se borra un caracter, se determina cual fue la última cadena que devolvió resultados nulos. Si esa cadena es igual a las primeras letras de la cadena actual, se sabe de antemano que no habrá resultados, por lo que no se accede a ella.

Para obtener los códigos cliqueá aquí.

Actualización

Este código fuente queda pendiente de actualización debido a su complejidad y el poco tiempo del que dispongo. De todas formas he añadido algunos comentarios entre líneas para hacer más ameno su estudio.