Django Select2 Integration

8.4.8 · active · verified Tue Apr 14

django-select2 provides a robust Django integration for the popular Select2 JavaScript library, enhancing dropdowns with search, remote data loading, and custom rendering. The current version is 8.4.8, and it sees frequent minor updates and security patches, typically on a monthly or bi-monthly cadence.

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to integrate `django-select2` with a simple Django form. Key steps include adding `django_select2` to `INSTALLED_APPS`, including its URL patterns, defining a form with a `Select2Widget`, and ensuring `{{ form.media }}` is present in your template to load the necessary JavaScript and CSS assets.

import os
from django import forms
from django.conf import settings
from django.urls import path, include
from django.http import HttpResponse
from django.shortcuts import render
from django_select2.forms import Select2Widget

# Minimal Django settings for testing
settings.configure(
    INSTALLED_APPS=[
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'django_select2',
        # Add a placeholder app for templates
        'my_app'
    ],
    TEMPLATES=[
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(os.path.dirname(__file__), 'templates')],
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
    ],
    SECRET_KEY='a_very_secret_key_for_testing_only',
    DEBUG=True,
    STATIC_URL='/static/',
    STATICFILES_FINDERS=[
        'django.contrib.staticfiles.finders.FileSystemFinder',
        'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    ],
    ROOT_URLCONF=__name__,
)

# Create a dummy templates directory and file for the quickstart
if not os.path.exists('templates'):
    os.makedirs('templates')
with open('templates/quickstart_form.html', 'w') as f:
    f.write('''
    <!DOCTYPE html>
    <html>
    <head>
        <title>Select2 Quickstart</title>
        {{ form.media.css }}
    </head>
    <body>
        <h1>Select2 Form</h1>
        <form method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Submit</button>
        </form>
        {{ form.media.js }}
    </body>
    </html>
    ''')

# forms.py (conceptually)
class MyChoiceForm(forms.Form):
    fruit = forms.ChoiceField(
        choices=[
            ('apple', 'Apple'),
            ('banana', 'Banana'),
            ('orange', 'Orange'),
            ('grape', 'Grape'),
            ('strawberry', 'Strawberry'),
        ],
        widget=Select2Widget(attrs={'data-placeholder': 'Select a fruit'})
    )

# views.py (conceptually)
def quickstart_view(request):
    if request.method == 'POST':
        form = MyChoiceForm(request.POST)
        if form.is_valid():
            return HttpResponse(f"You selected: {form.cleaned_data['fruit']}")
    else:
        form = MyChoiceForm()
    return render(request, 'quickstart_form.html', {'form': form})

# urls.py (conceptually)
urlpatterns = [
    path('select2/', include('django_select2.urls')),
    path('', quickstart_view, name='quickstart'),
]

# To run this, you'd typically have a manage.py and runserver,
# but for a self-contained example:
# from django.core.management import call_command
# call_command('runserver', '0.0.0.0:8000')

print("To run this example:")
print("1. Ensure you have django and django-select2 installed.")
print("2. This code snippet directly configures Django for a basic test.")
print("3. In a real project, you'd set up INSTALLED_APPS, URL patterns and templates normally.")
print("4. Access '/' to see the form.")

view raw JSON →