CODEWITHSUNDEEP
pythondjangodjango-autocomplete-light
NinjaChris
NinjaChris

Reputation: 51

Django-autocomplete-light showing empty dropdown instead of autocomplete widget

I am trying to implement django-autocomplete-light in my projects but cannot figure out why it does not show me the autocomplete widget, but keeps showing an empty dropdown.

I followed the tutorial: https://django-autocomplete-light.readthedocs.io/en/3.1.3/tutorial.html.

I found that this problem has occurred in other stackoverflow questions, but none of those answers have helped me so far.

I have the following model:

class Vilt(models.Model):
    vilt_title = models.CharField(max_length=200, unique=True)

I created this autocomplete view:

class ViltAutocomplete(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 Vilt.objects.none()
        qs = Vilt.objects.all().order_by('vilt_title')

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

        return qs

I use this ModelForm where I specify the widget.

from .models import Vilt
from dal import autocomplete

class ViltSearchForm(forms.ModelForm):
  vilt_title = forms.ModelChoiceField(
    queryset = Vilt.objects.all(),
    widget = autocomplete.ModelSelect2(url='vilt-autocomplete')
  )

  class Meta:
    model = Vilt
    fields = ('vilt_title',)

from .views import (ViltAutocomplete,
                    )
urlpatterns = [
    #other paths
    path('vilt/autocomplete/', ViltAutocomplete.as_view(), name='vilt-autocomplete'),
    #other paths
]

{% extends "bierviltje/base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container">
#other forms
    <div>
        <form action="" method="post">
            {% csrf_token %}
            {{ vilt_search_form|crispy }}
            <input type="submit" />
        </form>
    </div>
#other forms
</div>
{% endblock content %}

{% block javascript %}
{{ vilt_search_form.media }}
{% endblock javascript %}

This is the Javascript that is loaded in before the javascript block in base.html:

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
{% block javascript %}
{% endblock javascript %}

Upvotes: 3

Views: 2619

Answers (2)

CodeRed
CodeRed

Reputation: 1410

If you are having a similar issue, check your source code or console to be sure you have Jquery loaded. This behavior is common when you don't have jquery in your template

To load jquery, add this at the top or head section of your template.

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

Upvotes: 0

user11848927
user11848927

Reputation:

It's been sometime since you posted your query. But in case you have not found the answer yet, here is the solution:

In your ModelForm "ViltSearchForm", please change the widget from:

widget = autocomplete.ModelSelect2(url='vilt-autocomplete')

to:

widget = autocomplete.ListSelect2(url='vilt-autocomplete')

However, if I may add here, I can't fathom the reason for using "autocomplete" on a stand alone model.

A feedback would be much appreciated.

Upvotes: 1

Related Questions