Django, jQuery, y autocompletar

Después de una investigación exhaustiva (Google), no puedo encontrar un tutorial actual sobre cómo configurar el autocompletado usando Django y jQuery. Parece que hay una variedad de complementos y no parece haber ninguna coherencia 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 autocompletada que esté bien documentada y sea bastante fácil de utilizar.

Sugerencias?

Si buscas buscar desde tus modelos de 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 el autocompletar jQuery 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 conectar todo en su formulario de entrada tendría algo como:

  

Tenga en cuenta que esto también está utilizando la interfaz de usuario de Jquery, además de jQuery.

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/

Soy un gran fan de django-autocomplete: https://bitbucket.org/tyrion/django-autocomplete/wiki/Home . Tiene un buen plug-and-play y es muy fácil de integrar con sus propias aplicaciones sin mucha encoding adicional.

Supongamos que desea configurar el autocompletado en algún campo de entrada (como ) con el nombre de usuario de sus usuarios. Así es como lo hice, y funcionó sin problemas para mí.

urls.py

En primer lugar, agregue la url donde buscará ajax

 url(r'^ajax/autocomplete/$', views.autocomplete, name='ajax_autocomplete') 

vistas.py

Luego configure una vista para recuperar de la base de datos la información que necesita

 from django.http import JsonResponse def autocomplete(request): if request.is_ajax(): queryset = User.objects.filter(username__startswith=request.GET.get('search', None)) list = [] for i in queryset: list.append(i.username) data = { 'list': list, } return JsonResponse(data) 

JavaScript

Finalmente, debe realizar una función de JavaScript que vaya a la base de datos y devuelva los nombres de usuario que coincidan con el valor del campo de entrada cada vez que presione (y suelte) una tecla. Para esto, vamos a utilizar Ajax , JQuery y la función autocompletar de JQuery-ui .

 jQuery(function() { $("#id_input").on('keyup', function(){ var value = $(this).val(); $.ajax({ url: "{% url 'ajax_autocomplete' %}", data: { 'search': value }, dataType: 'json', success: function (data) { list = data.list; $("#id_input").autocomplete({ source: list, minLength: 3 }); } }); }); }); 

Y eso es todo, mi amigo! Para más información, puedes consultar este tutorial.

django-autocomplete-light es una muy buena opción. Es muy fácil de usar y también está muy bien documentado. Enlace: https://github.com/yourlabs/django-autocomplete-light

Documentación: https://django-autocomplete-light.readthedocs.org/en/master/

Hay una manera sin usar Json:

Ejemplo: supongamos que tienes un modelo llamado College:

 class College(models.Model): collegeName = models.CharField(max_length=250) def __str__(self): return self.collegeName 

Ahora, renderiza un contexto llamado ‘all_colleges’ = College.objects.all () a tu plantilla ,:

HTML:

  

JS:

  $( function() { var availableColleges = [ {% for clg in all_colleges %} "{{clg}}", {%endfor%} ]; $( "#clg" ).autocomplete({ source: availableColleges }); } ); 

Recursos a incluir en la plantilla:

    

¡Eso es!

Si necesita autocompletar para mostrar las opciones que comienzan con el término ingresado, modifique la función de filtro autocompletar de filtro por defecto agregando este fragmento en su plantilla:

  // over write the default autocomplete function to match the option starting with entered term $.ui.autocomplete.filter = function (array, term) { var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i"); return $.grep(array, function (value) { return matcher.test(value.label || value.value || value); }); }; 

Comenta si te enfrentas a algún problema 🙂

Descubrí que la forma más sencilla de comenzar (aunque probablemente no sea la óptima para la producción) es con el widget de autocompletado de JQuery .

La forma más básica solo requiere copiar y pegar el código en su html, utilizando una matriz como source :

      jQuery UI Autocomplete - Cities example       

En django 1.10 uso el mismo código.

url

 # Ajax url(r'^search-autocomplete/$', autocompleteModel, name='search-autocomplete'), 

ver:

 def autocompleteModel(request): search_qs = Account.objects.filter(email__startswith=request.GET['search']) results = [] for r in search_qs: results.append(r.email) resp = request.GET['callback'] + '(' + simplejson.dumps(results) + ');' return HttpResponse(resp, content_type='application/json') 

js

 $(document).ready(function () { function searchOpen() { var search = $('#countryId').val(); $.ajax({ url: '/cabinet/search-autocomplete', dataType: 'jsonp', type: 'GET', async: false, data: injectCsrfToken({ search: search }), success: function (data) { searchResult(data) }, error: function () { console.log('error'); } }); } function searchResult(data) { console.log('sdfsdfd'); $( "#countryId" ).autocomplete ({ source: data }); } $("#countryId").on('keyup', function () { searchOpen(); }); }); 

html:

  

Sé que implementar autocompletar jQuery es complicado. Aquí hay un ejemplo de trabajo para Django> 2.0:

Paso 1: Cree un HTML simple con una entrada (No olvide agregar enlaces para cargar jQuery y jquery-ui). Guarde el código como testsearch.html

      

Paso 2: Agrega un código JavaScript al html. Llama a la función autocompletar desde jquery-ui. Esta función utiliza una fuente a la que llama la URL de Ajax.

  

Paso 3: Ahora necesitamos crear dos funciones. Una función simple para representar testsearch.html y otra que recibe llamadas Ajax y envía datos.

 def ajax_load_project(request): if request.is_ajax(): q = request.GET.get('term', '') print(q) projects = Project.objects.filter(title__istartswith=q)[:5] results = [] for project in projects: project_json = {} project_json['id'] = project.id project_json['value'] = project.title project_json['label'] = project.title results.append(project_json) data = json.dumps(results) else: data = 'fail' mimetype = 'application/json' return HttpResponse(data, mimetype) def searchProject(request): template = 'project/testsearch.html' return render(request, template) 

El proyecto es mi modelo. Puedes reemplazarlo con tu modelo. Reemplace el título con el campo utilizado para la búsqueda.

Para mi ejemplo puedes crear este modelo simple:

 class Project(models.Model): """ A Model representing a the project. """ title = models.CharField(max_length=200) 

Paso 4: No olvides incluir dos URLs. Uno para el HTML y el otro para las llamadas Ajax.

 urlpatterns += [ #test search path('SuggestProject/', views.ajax_load_project, name='ajax_load_project'), path('searchtest/', views.searchProject, name='searchProject'),] 

Considero que https://www.w3schools.com/howto/howto_js_autocomplete.asp tutorial es bueno. El tutorial utiliza una matriz de países estática desde la cual la función de autocompletar selecciona las respuestas (elementos desplegables).

Ahora, para hacer el mismo más dynamic, podemos agregar la llamada jQuery ajax simple a una vista de Django.

 var countries; $.ajax({ url : '/autocomplete_view'; data : {'query':$('#query').val()}; type : 'GET', success : function(response){ countries = JSON.parse(response); // do something extra }, failure : function(response){ // do something here }, async : false });