Boris The Animal Boris The Animal - 11 months ago 127
jQuery Question

django-autocomplete-light displays empty dropdown in the form

I am trying to use django-autocomplete-light
From this tutorial

I Installed it with pip and added it to my settings file


for my tenant value

My tenant model is

class Tenant(CommonInfo):
version = IntegerVersionField( )

first_name = models.CharField(max_length=30)
last_name = models.CharField(max_length=40)
def __unicode__(self):
return u'%s %s %s ' % ("#",,"first_name", self.first_name, "last_name")

In my autocomplete view:

from django.shortcuts import render
from dal import autocomplete
from client.models import Tenant

class TenantAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
# Don't forget to filter out results depending on the visitor !
if not self.request.user.is_authenticated():
return Tenant.objects.none()

qs = Tenant.objects.all()

if self.q:
qs = qs.filter(last_name__istartswith=self.q)

return qs

in autocomplete url

from django.conf.urls import url, include,patterns
from client import views

urlpatterns = [

and in form

class LeaseTenantForm(forms.ModelForm):
tenant = forms.ModelChoiceField(
class Meta:
model = LeaseTenant
exclude = ['lease']

However after rendering in browser I don't see the input text field but the empty dropdown.
in actual view

def tenant_new(request,pk,uri):
lease = get_object_or_404(Lease, pk=pk)
title = 'tenant'
uri = _get_redirect_url(request, uri)
if request.method == "POST":
form = LeaseTenantForm(request.POST)
if form.is_valid():
tenant = = lease
messages.add_message(request, messages.SUCCESS, str( + "-SUCCESS Object created sucssefully")

return redirect(uri)
form = LeaseTenantForm()
return render(request, 'object_edit.html', {'form': form, 'title': title, 'extend': EXTEND})

My template file

{% block title %}
Add/Edit {{ title }}
{% endblock title %}

{% block content %}

<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h4>{{ title }}</h4>
<br><div class="center">
<form method="POST" class="form" action="" method="get">
<div class="form-group">
{% csrf_token %}
{{ form|crispy}}

{{ }}

<button type="submit" class="btn btn-primary btn-primary">Save</button>

{% endblock content %}

So basically the autocomplete is not working .
What should I validate to make it work?

enter image description here

joe joe
Answer Source

I was running into the same problem. This was a good reference: django-autocompletion-light simple foreign key completion shows not editable drop-down widget

Make sure you are loading the jquery in your header file and that you use the {{ }} tag for your form.

Here is how I load the jquery in my header file:

<script src=""></script>
  <script src=""></script>

Also, have you tried going to the tenant-autocomplete/ url to see if you get the results on that page like it is mentioned in the tutorial

If you can't get results from the url that should be the first bug you fix.