Auto-complete é aquele recurso usado por alguns sites, onde ao digitar alguma coisa em uma caixa de texto, aparecem sugestões que coincidam com os caracteres digitados, bastando clicar para selecionar a opção desejada. É algo que facilita a vida do usuário e também reduz o tráfego de informações entre a aplicação e o banco de dados, o que hoje em dia é algo que vale muito a pena considerar.
Vou apresentar como fazer isso usando o framework Django e a JQuery UI. É necessário um conhecimento básico prévio de Django, pois não vou mostrar todas as etapas da criação da aplicação.
Antes de qualquer coisa, adicione as referências para a JQuery e JQuery UI na página do auto-complete. É recomendável utilizar o CDN do Google, conforme indica na própria página do JQuery UI:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>
Em primeiro lugar, o exemplo de um model que vamos usar, bem simples para focar na didática:
class Livro(models.Model): nome = models.CharField(max_length=100, null=False) def __unicode__(self): return self.nome
Uma simples classe Livro com um campo nome.
Agora, a view que responderá as requisições Ajax. Ela vai receber os caracteres digitados pelo usuário, efetuará uma busca no banco de dados, vai formatar os dados para o auto-complete e devolver a resposta para a requisição Ajax no formato JSON:
from django.http import HttpResponse from django.utils import simplejson def busca_autocomplete(request): busca = request.GET['term'] livros = Livro.objects.filter(livro__istartswith=busca) res = [ dict(id=l.id, label=l.__unicode__(), value=l.__unicode__()) for l in livros ] return HttpResponse(simplejson.dumps(res), mimetype="application/x-javascript")
Criada a view, é necessário configurar a url para ela, no arquivo urls.py:
(r'^livros/$', 'seu_projeto.sua_aplicacao.views.busca_autocomplete')
A view que criamos logo acima será acionada quando o browser solicitar a url /livros/.
E finalmente, o código Javascript que vai configurar o auto-complete. Ele deve ser colocado na página onde está o campo texto que o usuário vai digitar a informação e, conforme ele for digitando, o auto-complete vai apresentar sugestões baseadas no que ele digitou. Vamos considerar que o id do campo texto será “texto”.
$(function() { $( "#texto" ).autocomplete({ source: "/livros/", minLength: 3, select: function( event, ui ) { alert("ID: " + ui.item.id); } });
Explicando resumidamente… o parâmetro source informa a URL que vai responder à requisição, o parâmetro minLength indica o número mínimo de caracteres que o usuário deverá digitar para acionar o auto-complete e o parâmetro select é a rotina que vai tratar o evento de seleção de uma opção do auto-complete (no nosso caso, exibir um alert com o ID do livro).
Sabe aquela velha máxima que diz que um programador deve aprender uma nova linguagem por ano? Pois então, resolvi botar a mão na massa e seguir esta regra. Mas aí vem a pergunta: qual linguagem aprender?? Para decidir, enumerei alguns requisitos: ser orientada a objetos e também funcional, sintaxe simples mas com bastante recursos, comunidade vasta e ativa e ser adequada para desenvolvimento web. De imediato selecionei 