Auto-completar Ajax

Algumas pessoas tem escrito perguntando como se produz um efeito semelhante ao Google Suggest. Esta série de artigos e o script que a acompanha são uma maneira de tentar responder a esta dúvida.

Exemplo do efeito desejado:

O script

Embora a idéia original seja bastante simples, o controle de eventos do teclado é bastante complexo e exige um bocado de código, além de um bom conhecimento de DOM. Além disso, é muito interessante que esse tipo de coisa seja produzida no formato de um script reaproveitável, o que exige uma série de outros conhecimentos que tornam o código complexo demais para um artigo simples.

Assim, resolvi escrever sobre algumas coisas:

1. Como usar este script para implementar um recurso de auto-completar em seu site.
2. Como personalizar este recurso.
3. Como escrever um script como este, que trata eventos do navegador, inclusive do IE bugado.
4. Como escrever código ajax usando JSON, uma das maneiras mais práticas de se fazer ajax.
5. Como escrever código javascript que seja facilmente reaproveitado.

Como usar este script

Tentei construir um script que você possa reaproveitar sem ter o trabalho de entendê-lo todo. Nas partes posteriores desta série de artigos vamos entender este script passo a passo, e pretendo dar dicas de como construir código reaproveitável como este. Então vamos começar analisando o resultado, isto é, aproveitando este código numa página para ver como será a experiência de quem quiser usá-lo sem entendê-lo.

Para começar, copie para seu site os arquivos:

• autocompletar.css
• autocompletar.js
• events.js
• xmlhttp.js

Em seguida inclua estes arquivos na seção head do seu HTML, assim:

<link rel="stylesheet" href="css/autocompletar.css" />
<script src="js/events.js"></script>
<script src="js/xmlhttp.js"></script>
<script src="js/autocompletar.js"></script>

Seu formulário HTML precisa ter a class autocompletar e o campo de formulário que vai ser preenchido terá o id completeaqui. Defina então a largura do seu campo de formulário junto com a da caixa de sugestões, no CSS:

.completeaqui,div#completando{
        width:300px;
}

Fazendo a busca via Ajax, com JSON

A maneira mais simples de usar este script é fazê-lo buscar os dados do servidor via Ajax, no formato JSON. Para isto, basta fazer sua página PHP, ASP ou seja lá o que estiver usando, retornar um Array de strings formatado em JSON. (Vou falar mais de JSON na quarta parte desta série.)

Veja um exemplo disso na página python que estou usando neste tutorial: ap, fi. É esta página que meu script vai buscar.

Tendo construído uma página no servidor que retorna os dados no formato acima, basta:

window.onload=function(){
ac_registraJSON(document.forms[0],"q","busca.pt?q=")
}

Onde "busca.pt?q=" é o endereço de onde esse script vai buscar os dados. O primeiro argumento (document.forms[0]) é o formulário que contém o campo, e o segundo ("q") o nome do campo.

Pretendo colocar a segunda parte dessa série no ar na terça-feira à noite. Aviso vocês aqui e aqui