jQuery Autocomplete + Django + AJAX
Ahora voy a explicar algo técnico pero estético, como utilizar la plugin de jQuery Autocomplete con Django+AJAX, con ella se pueden conseguir efectos como este;
jQuery Autocomplete
Trataré de hacer una consulta por AJAX a una URL cuando tipee 3 o más letras, el código puede ser el siguiente;
$('input').autocomplete({ minLength:3, source: function(req, add){ $.ajax({ url: '/ajax/url/', async: false, dataType:'json', type:'POST', data: { start: function() { return $(this).val(); }, }, success: function(data) { //create array for response objects var suggestions = []; //process response $.each(data.items, function(i, val){ suggestions.push(val[0]); }); //pass array to callback add(suggestions); } }); } }); |
Donde:
- input: Será el selector del campo de texto al que queremos aplicarle el plugin.
- minLength: La longitud mínima para hacer la consulta.
- ‘/ajax/url/’: La URL donde haremos la consulta.
- start: Va a ser el valor actual del campo de texto, el texto que hemos tipeado y por el que queremos buscar.
La vista podría estar definida como sigue:
def search(request): if request.method=='GET' or not request.POST.__contains__('start'): return HttpResponseForbidden() # Hacemos la consulta para aquellos elementos que empiecen por start ordenados por nombre query = Model.objects.filter(name__istartswith=request.POST['start']).order_by('name') # Serializamos objects = u'{items: [\n' for i in query: objects += u'{"0":"%s"},\n' % (i.name.replace('"','')) objects=objects.strip(",\n"); objects+=u']}\n' return HttpResponse(objects,mimetype="text/plain") |
También se pueden utilizar serializadores para pasar la información a JSON, pero en este caso he preferido hacerlo a mano.
Para más información visita la página de jQuery.
