Blog do Bragil

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).