3

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 %}
Manu mathew
  • 859
  • 8
  • 25
NinjaChris
  • 51
  • 6
  • I'm betting it's the crispy template filter that's impacting it. You can determine if that's the cause by replacing `|crispy` with `|as_p`. – schillingt May 14 '19 at 13:18
  • @schillingt Thanks for your reply. I tried changing it to {{ vilt_search_form.as_p }}. It looks worse now, but nothing changed about the functionality. So unfortunately this does not seem to be the problem. – NinjaChris May 14 '19 at 13:32
  • Is the javascript working properly, does it generate requests to the server? Is the server simply returning empty data sets? – schillingt May 14 '19 at 13:44
  • Alright that's good. It eliminates that as a potential problem. You need to check if your javascript is generating requests to the correct url now. You can do that with a browser's developer tools. – schillingt May 14 '19 at 13:48
  • The server returns the following: `[14/May/2019 15:47:42] "GET /vilt/create/ HTTP/1.1" 200 18561 [14/May/2019 15:47:42] "GET /static/admin/js/vendor/select2/select2.full.js HTTP/1.1" 404 1741 [14/May/2019 15:47:42] "GET /static/admin/js/vendor/select2/select2.full.js HTTP/1.1" 404 1741 [14/May/2019 15:47:42] "GET /static/koka_favicon.ico HTTP/1.1" 200 5430` – NinjaChris May 14 '19 at 13:48
  • 1
    That's a no. It's not generating requests to the URL you want. Inspect the HTML element make sure it's similar to any demo examples for the library. Then take a look at the console if there's an error. If there's a discrepancy in the html, search why that's occurring. It there's an error, consider what could cause it and/or search for it to see what other people did. Good luck! – schillingt May 14 '19 at 13:54

1 Answers1

1

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.