Django Forms: Django-select2 Not rendering multi select box correctly

Using Django Forms & APIs
1

Im using django-select2 : Django-Select2 — Django-Select2 8.0.1.dev16+g81c9b25 documentation

Im attempting to create a multiple tag select dropdown box similar to this:


The problem is its not loading as expected and is like this:


Below is my code. Im using the Select2TagWidget currently but I have tried the following other widgets:

ModelSelect2MultipleWidget
Select2MultipleWidget

forms.py

class BankForm(ModelForm):
     required_css_class = "required"
     formField1 = forms.ModelMultipleChoiceField(
       queryset=Bank.objects.all(),
       label="Lead Bank",
       widget=Select2TagWidget,
)

class Meta:
model = AdditionalBank
fields = [
"formField1",
]

""" Labels for the fields we didn't override """
labels = {}

urls.py

Ive added the correct path to my urls.py file

path("select2/", include("django_select2.urls")),

I have the redis queue setup correctly in my settings.py file. Im pretty confident the rest of the configuration is setup correctly outlined in the docs for django-select2

My Front end form is rendering this html/css:

<select name="lead\_bank" lang="None" data-minimum-input-length="1" data-theme="default" data-allow-clear="false" data-tags="true" data-token-separators="\[\&quot;,\&quot;, \&quot; \&quot;\]" required="" id="id\_lead\_bank" class="django-select2" multiple="">

<option value="1">Citi</option>

<option value="2" selected="">USBank</option>

<option value="3">Wells Fargo</option>

<option value="4" selected="">NY Bank</option>

</select>

Keep in mind I am very new to front end dev. Primarily a backend dev.

Thank you in advance !

2

That type of “enhanced widget” is something handled within the browser.

In the Add note example at the top, what JavaScript / CSS libraries were used to create those effects?

If that’s how you want the box to appear, that’s what you need to replicate. Also see API Documentation — Django-Select2 8.0.1.dev16+g81c9b25 documentation

3

Hey @KenWhitesell. Unfortunately I dont know what javascript or css libraries are being used to render that form. I just pulled it from a google search images of a “Multi Select tag Form”

4

In that case, you may want to redo your search, but look for the JavaScript libraries that create that type of widget.

1 Like
5

Have you included the {{form.meida}} tag in your template? Last time I used the Select2Widget. The documentation was missing instructions to include it. This loads the CSS and JSS the widget uses in your frontend.