Después de una extensa investigación (búsqueda en Google), no puedo encontrar un tutorial actual sobre cómo configurar el autocompletado usando Django y jQuery. Parece haber una variedad de complementos y no parece haber consistencia o estándar sobre cuál usar o cuándo.
No soy un profesional ni en Django ni en jQuery, pero necesito una solución de autocompletado que esté bien documentada y sea bastante fácil de utilizar.
¿Sugerencias?
Si está buscando buscar desde dentro de sus modelos Django, entonces algo como:
from django.utils import simplejson def autocompleteModel(request): search_qs = ModelName.objects.filter(name__startswith=request.REQUEST['search']) results = [] for r in search_qs: results.append(r.name) resp = request.REQUEST['callback'] + '(' + simplejson.dumps(result) + ');' return HttpResponse(resp, content_type='application/json')Para jQuery autocompletar y llamar:
function searchOpen() { var search = $('#txtSearch').val() var data = { search: search }; $.ajax({ url: '/search.json', data: data, dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'searchResult' }); } function searchResult(data) { $( "#txtSearch" ).autocomplete ({ source: data }); }Finalmente, para conectarlo todo en su formulario de entrada, tendría algo como:
<input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />Tenga en cuenta que esto también utiliza Jquery UI además de jQuery estándar.
Mientras tanto, apareció un buen tutorial.
autocomplete hace todo por ti, todo lo que tienes que hacer es lo siguiente:
js
$(function() { $("#search-field").autocomplete({ source: "/ajax_calls/myFunction", minLength: 2, }); });urls.py
url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),vistas.py
def get_drugs(request): if request.is_ajax(): ..... data = json.dumps(results) else: data = 'fail' mimetype = 'application/json' return HttpResponse(data, mimetype)FUENTE: http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/
Supongamos que desea configurar el autocompletado en algún campo de entrada (como <input type="text" id="id_input"> ) con el nombre de usuario de sus usuarios. Esta es la forma en que lo hice:
urls.py
En primer lugar, agregue una URL que utilizará la llamada AJAX.
url(r'^ajax/autocomplete/$', views.autocomplete, name='ajax_autocomplete')vistas.py
Luego configure una vista para recuperar la información (es decir, los nombres de usuario, en este caso) de la base de datos
from django.http import JsonResponse def autocomplete(request): if request.is_ajax(): username_query = request.GET.get('username_query', '') usernames = (User.objects .filter(username__startswith=username_query) .values_list('username', flat=True)) data = { 'usernames': usernames, } return JsonResponse(data)JavaScript
Finalmente, debe crear una función de JavaScript que vaya a la base de datos y devuelva los nombres de usuario que coinciden con el valor del campo de entrada cada vez que presiona (y suelta) una tecla. Para ello, vamos a utilizar Ajax , JQuery y la función de autocompletar de JQuery-ui .
jQuery(function() { $("#id_input").on('keyup', function(){ let value = $(this).val(); $.ajax({ url: "{% url 'ajax_autocomplete' %}", data: { 'username_query': value }, dataType: 'json', success: function (data) { let usernames = data.usernames; $("#id_input").autocomplete({ source: usernames, minLength: 3 }); } }); }); });¡Y eso es! Para más información, puedes consultar este tutorial