Desenvolvendo um auto-complete com PHP e Ajax

** Script atualizado para versão 1.1, clique aqui para ver os detalhes **

Desenvolvendo uma solução de sistema de gerência para o Dep. Comercial do ComuniWeb recebi inúmeros pedidos de “mas não pode aparecer os nomes dos clientes quando vou digitando?”. Ok não foi tão lindo e poético assim, na verdade o que acontecia era que o auto-complete padrão do IE causava uma confusão enorme nos usuários (usuário é usuário né?).

Me vi então cara a cara com um problema, como resolver este problema? Precisava que um script ao tempo que a pessoa digitava fizesse uma busca no banco para retornar a lista de clientes e o seu vendedor, isso tudo num browser. Se o tmepo hoje fosse alguns meses atrás (não muitos) eu falaria “impossível, estamos falando de web, nao delphi ou VB!”. Alás que surgiu o xmlHttpRequest e tudo mudou…

Fui então a busca de vários exemplos de auto-complete ou “google-suggest” (vantagens de se dominar a tecnologia…) e achei várias soluções que utilizavam diferentes métodos, porém nenhuma que utilizasse AJAX (salvo o próprio Google…). Confiem em mim quando alguém quer tornar um arquivo javascript ilegivel, essas pessoas conseguem, e o google o fez com toda categoria, variaveis de uma letra só e todos estoque de armas…

Portanto comecei com o arroz com feijão:

 <input name="string" id="string" onkeyup="sendAjaxReq(this.value)" type="text" />

A idéia era bem simples, a cada tecla uma requisição AJAX era feita, um arquivo PHP fazia a busca no banco e retornava um arquivo XML com a lista de resultados, algo como:

<root> <item id="286" label="temos"></item> <item id="288" label="ter"></item> <item id="332" label="tecnol%F3gico%2C"></item> </root>

foi simples o bastante converter esta lista em um div flutuante com uma unordered list (UL) e mostrar ela junto ao campo. Portanto o príncipio já estava la, você digita e clicando no item efetua a escolha… nada amigável né?

Faltava então buscar uma solução como a usada pelo google utilizando as setas (up e down) para navegar entre os resultados e usar o ENTER ou TAB para fazer a escolha. Para isso me apoiei em um script que já havia encontrado pela web, só para pegar a semantica.

Com isso terminei com um script que fazia a busca no banco, navegava por teclado ou mouse e enfim.. funcionava. quando terminei esta implementação já achei X novas oportunidades de utiliza-lo novamente decidi então tornar o script mais genérico de forma a utilizar ele de forma mais simples, e é isso que vocês podem conferir e utlizar.

Exemplo: veja aqui Download do arquivo (com exemplos): dmsAutoComplete.zip

Espero que seja útil, pelomenos para algumas pessoas.

Known bugs: No firefox na primeira vez que a lista é populada ela aparece toda em uma linha só, sem quebra de linhas.