Django

Question

I am following the tutorial on how to setup django-autocomplete fields and Im struggling to get it working. Here's the tutorial: https://django-autocomplete-light.readthedocs.io/en/master/tutorial.html

settings Installed Apps

INSTALLED_APPS = (
    'dal',
    'dal_select2',
    'django.contrib.admin',

project urls.py

from textchange.views import TextbookAutoComplete


urlpatterns = [
    url(r'^textbook-autocomplete$', TextbookAutoComplete.as_view(), name='textbook-autocomplete'),

HTML

<form method="POST"> {% csrf_token %}
        {% for field in form3 %}
          {{ field }}
        {% endfor %}
      <input id="search" class="button" type="submit" value="Search Textbooks" name="Search"></input>
      </form>

Forms.py

class Search(forms.ModelForm):
    longschool = forms.ModelChoiceField(
        queryset=Textbook.objects.all(),
        widget=autocomplete.ModelSelect2(url='textbook-autocomplete')
    )
    class_name = forms.ModelChoiceField(
        queryset=Textbook.objects.all(),
        widget=autocomplete.ModelSelect2(url='textbook-autocomplete')
    )
    isbn = forms.ModelChoiceField(
        queryset=Textbook.objects.all(),
        widget=autocomplete.ModelSelect2(url='textbook-autocomplete')
    )

    class Meta:
        model = Textbook
        fields = ('longschool', 'class_name', 'isbn')

Views.py

class TextbookAutoComplete(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 Textbook.objects.none()

        qs = Textbook.objects.all()

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

        return qs

Jquery added

  <script type="text/javascript" src="{% static "admin/js/jquery.js" %}"></script>

When the form shows up in my html it's just three dropdowns without input fields (as in without anywhere to type). Can anyone see what I am missing?

Any help would be greatly appreciated.

matyas · Accepted Answer

I just ran into the same problem and was able to solve it. I had 2 issues. I was forgetting to load {{form.media}} below the form that I loaded.

Make sure that you run the python manage.py collectstatic command after installing the django-autocomplete-light package. (This will copy the static files of this third party package into your own static folder).

django-autocomplete-light tried to load these static files form static/admin/js/vendor/, but for some reason the files were not there and could not be loaded. I manually included the javascript and css files in the header of the template where my form with the autocomplete input was loaded and that finally worked:

when loading the form in a template:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.full.js"></script>
</head>
<body>
 {{ form.as_p }}
 {{ form.media }}
</body>

Django - django-autocomplete-light setup how to

Tags:

python

jquery

autocomplete

Programmingjoe

1 Answers

matyas

Recent Activity

Donate For Us