Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

610
Vistas
Django, jQuery, and autocomplete

After some extensive research (Googling), I cannot find a current tutorial on how to set up autocomplete using Django and jQuery. There appears to be a variety of plugins and there appears to be no consistency or standard about which to use or when.

I'm not a pro at either Django or jQuery, but need an autocomplete solution that is well documented and fairly simple to utilize.

Suggestions?

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

If you're looking to search from within your django models then something like:

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

For the jQuery autocomplete and call:

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
    });
}

Finally to connect it all on your input form would have something like:

<input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />

Note, this is using Jquery UI as well in addition to stock jQuery.

over 4 years ago · Santiago Trujillo Denunciar

0

Meanwhile, a good tutorial appeared.

autocomplete does everything for you, all you have to do is the following:

js

$(function() {
  $("#search-field").autocomplete({
    source: "/ajax_calls/myFunction",
    minLength: 2,
  });
});

urls.py

url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),

views.py

def get_drugs(request):

    if request.is_ajax():
        .....
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

SOURCE: http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/

over 4 years ago · Santiago Trujillo Denunciar

0

Let's say you want to set up autocomplete on some input field (like <input type="text" id="id_input">) with the username of your users. This is the way I did it:

urls.py

First of all, add a url that will be used by the AJAX call.

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

views.py

Then set a view to retrieve the information (i.e the usernames, in this case) from the database

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

Finally, you need to make a JavaScript function that goes to the database and returns the usernames that match with the value of the input field every time you press (and release) a key. For this, we are going to use Ajax, JQuery and the JQuery-ui's autocomplete function

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 
                });       
            }
        });        
    });
  });

And that's it! For more information, you can check out this tutorial

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda