Django Taggit - Autocomplete Light (Guidance with configuring)

Question

I have Taggit fully up and running and would like to configure Autocomplete Light in order to enable the Select2 dropdown when users select their preferred tags within my application.

I have installed DAL, dal_select2 along with dal_queryset_sequence libraries.

I already have a form created where my users can simply upload a photo, add content and a TagField. Although, the TagField currently operates as a normal text field (But the tags do successfully save through to my Taggit app) - I'm just struggling to get the Select2 dropdown working.

Here are my settings (as far as the Installed Apps are concerned:

Settings.py

INSTALLED_APPS = [
    'core.apps.AConfig',
    'users.apps.UConfig',
    'crispy_forms',
    'emoji_picker',
    'taggit',
    'dal',
    'dal_select2',
    'dal_queryset_sequence',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sites',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
]

Within my Views.py

from dal import autocomplete

class TagAutocomplete(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 Tag.objects.none()

        qs = Tag.objects.all()

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

        return qs

URLs.py

from core.views import TagAutocomplete

urlpatterns = [
    url(
        r'^tag-autocomplete/$',
        TagAutocomplete.as_view(),
        name='tag-autocomplete',
    ),
]

Forms.py

import dal
from dal import autocomplete
from taggit.models import Tag

    class PostForm(autocomplete.FutureModelForm):
        tags = forms.ModelChoiceField(
        queryset=Tag.objects.all()
    )

    class Meta:
        model = Post
        fields = ('__all__')
        widgets = {
            'tags': autocomplete.TaggitSelect2(
                'tag-autocomplete'
            )
        }

I've looked at the documentation for Django Autocomplete Light, but I'm not too sure where to go from the code I already have in place.

Any guidance would be much appreciated!

Thanks! :-)

Answer 1

Try to add this code to your HTML template where you have your form:

#YourHTMLTemplate.html
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

{{ form.media }}

<script>
(function($) {
    $('#add-form').click(function() {
        var index = $('#id_inline_test_models-TOTAL_FORMS').val()
        var newTable = $('#id_inline_test_models-__prefix__-DELETE').parents('table').clone()
        newTable.find(':input').each(function() {
            for (attr of ['name', 'id'])
                $(this).attr(
                    attr,
                    $(this).attr(attr).replace('__prefix__', index)
                )
        })
        newTable.insertBefore($(this))
        $('#id_inline_test_models-TOTAL_FORMS').val(
            parseInt($('#id_inline_test_models-TOTAL_FORMS').val()) + 1
        )
        newTable.slideDown()
    })
})($)
</script>

After that, the dropdown should work. More details here.