Django Select 2 example for demo app

demo/demo/admin.py

@@ -4,12 +4,12 @@
 from django.contrib.admin.views.decorators import staff_member_required
 from django.contrib import messages
 from django.shortcuts import redirect
-from django.utils.encoding import force_text
+from django_select2.forms import ModelSelect2Widget
 from suit import apps
-
 from suit.admin_filters import IsNullFieldListFilter
 from suit.sortables import SortableTabularInline, SortableModelAdmin, SortableStackedInline
 from suit.widgets import AutosizedTextarea
+from .widgets import Bootstrap4Select
 from .models import *
 from .views import *
 
@@ -205,10 +205,18 @@ class MovieInline(SortableStackedInline):
     }
 
 
+class CountrySelect2Widget(Bootstrap4Select, ModelSelect2Widget):
+    search_fields = [
+        'name__icontains',
+        'code__iexact',
+    ]
+
+
 class ShowcaseForm(ModelForm):
     class Meta:
         widgets = {
             'textfield': AutosizedTextarea,
+            'country2': CountrySelect2Widget()
         }
 
 
@@ -220,12 +228,14 @@ class ShowcaseAdmin(admin.ModelAdmin):
     # radio_fields = {"horizontal_choices": admin.HORIZONTAL,
     #                 'vertical_choices': admin.VERTICAL}
     # list_editable = ('boolean',)
-    list_filter = ('horizontal_choices',)
+    list_filter = ('choices', 'vertical_choices')
+    suit_list_filter_horizontal = ('choices',)
     # list_display = ('name', 'help_text', 'choices', 'horizontal_choices', 'boolean')
     list_display = ('name', 'help_text')
     readonly_fields = ('readonly_field',)
     radio_fields = {"horizontal_choices": admin.HORIZONTAL,
                     'vertical_choices': admin.VERTICAL}
+    raw_id_fields = ('raw_id_field',)
 
     fieldsets = [
         (None, {'fields': ['name', 'help_text', 'textfield',
@@ -243,6 +253,10 @@ class ShowcaseAdmin(admin.ModelAdmin):
          {'fields': ['boolean', 'boolean_with_help', 'choices',
                      'horizontal_choices', 'vertical_choices']}),
 
+        ('Foreign key relations',
+         {'description': 'Original select and linked select feature',
+          'fields': ['country', 'country2', 'raw_id_field']}),
+
         # ('Date and time', {
         #     'description': 'Improved date/time widgets (SuitDateWidget, '
         #                    'SuitSplitDateTimeWidget) . Uses original JS.',

demo/demo/migrations/0011_auto_20170211_2156.py

@@ -0,0 +1,31 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.11 on 2017-02-11 19:56
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('demo', '0010_auto_20170211_2037'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='showcase',
+            name='country',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='demo.Country'),
+        ),
+        migrations.AddField(
+            model_name='showcase',
+            name='country2',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='showcase_country2_set', to='demo.Country', verbose_name=b'asd'),
+        ),
+        migrations.AddField(
+            model_name='showcase',
+            name='raw_id_field',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='showcase_raw_set', to='demo.Country'),
+        ),
+    ]

demo/demo/models.py

@@ -82,6 +82,12 @@ class Showcase(models.Model):
     choices = models.SmallIntegerField(
         choices=TYPE_CHOICES3, default=3, help_text="Help text")
 
+    country = models.ForeignKey(Country, null=True, blank=True)
+    country2 = models.ForeignKey(Country, null=True, blank=True, related_name='showcase_country2_set', verbose_name='Django Select 2')
+    raw_id_field = models.ForeignKey(Country, null=True, blank=True, related_name='showcase_raw_set')
+    # linked_foreign_key = models.ForeignKey(Country, limit_choices_to={
+    #     'continent__name': 'Europe'}, related_name='foreign_key_linked')
+
     class Meta:
         verbose_name_plural = 'Showcase'
 

demo/demo/settings.py

@@ -38,6 +38,10 @@
     # Django Suit
     'demo.apps.SuitConfig',
 
+    # 3rd party apps
+    'django_select2',
+
+    # Django
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',

demo/demo/static/admin/js/jquery.init.js

@@ -0,0 +1,8 @@
+var django = django || {};
+django.jQuery = jQuery.noConflict(true);
+
+// Override Django jquery.init.js
+// Make jQuery global - needed for Django-Select2
+if (!window.jQuery)
+    window.$ = window.jQuery = django.jQuery;
+

demo/demo/static/css/demo.css

@@ -0,0 +1,30 @@
+.django-select2 {
+    min-width: 250px;
+}
+
+/* Improve Bootstrap4 to make it more matching */
+#content .select2-container--bootstrap {
+    display: inline-block;
+    margin-right: 5px;
+    border-radius: .25rem;
+}
+
+#content .select2-container--bootstrap .select2-selection {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+}
+
+#content .select2-container--bootstrap:not(.select2-container--focus):not(.select2-container--open) .select2-selection {
+    border-color: #d9d9d9;
+}
+
+#content .select2-container--bootstrap .select2-selection--single {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    height: 32px;
+}
+
+#content .select2-container--bootstrap .select2-selection__choice {
+    background-color: #F1F1F1;
+    border: 1px solid #ddd;
+}

demo/demo/templates/admin/base_site.html

@@ -1,20 +1,19 @@
 {% extends 'admin/base_site.html' %}
-{% load suit_tags %}
+{% load suit_tags admin_static %}
 
 {# Following is an example how to extend admin by custom CSS or JS files #}
 {# Add extra CSS for admin #}
-{#{% block extrastyle %}#}
-{#    {{ block.super }}#}
-{#    <link rel="stylesheet" href="{% static 'css/admin.css' %}">#}
-{#{% endblock %}#}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static 'css/demo.css' %}">
+{% endblock %}
 
 {#{% block foot %}#}
 {#    {{ block.super }}#}
 {#    <script type="text/javascript"></script>#}
 {#{% endblock %}#}
 
 
-
 {# Switch for demonstration purposes, not indended for production use #}
 {% block usertools %}
     {% with suit_layout='layout'|suit_conf:request %}

demo/demo/urls.py

@@ -13,7 +13,7 @@
     1. Import the include() function: from django.conf.urls import url, include
     2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
 """
-from django.conf.urls import url
+from django.conf.urls import url, include
 from django.contrib import admin
 from django.views.generic import RedirectView
 
@@ -26,6 +26,9 @@
 
     url(r'^admin/', admin.site.urls),
 
+    # Django-Select2
+    url(r'^select2/', include('django_select2.urls')),
+
     # Documentation url for menu documentation link
     url(r'^admin/custom2/', RedirectView.as_view(url='http://djangosuit.com/support/'), name='django-admindocs-docroot'),
 ]

demo/demo/widgets.py

@@ -0,0 +1,29 @@
+from django.conf import settings
+from django.forms import forms
+from django.contrib.staticfiles.templatetags.staticfiles import static
+
+
+class Bootstrap4Select(object):
+    def build_attrs(self, extra_attrs=None, **kwargs):
+        attrs = super(Bootstrap4Select, self).build_attrs(extra_attrs, **kwargs)
+        attrs.setdefault('data-theme', 'bootstrap')
+        return attrs
+
+    def _get_media(self):
+        """
+        Construct Media as a dynamic property.
+        .. Note:: For more information visit
+            https://docs.djangoproject.com/en/1.8/topics/forms/media/#media-as-a-dynamic-property
+        """
+        return forms.Media(
+            js=(
+                settings.SELECT2_JS,
+                static('django_select2/django_select2.js'),
+            ),
+            css={'screen': (
+                settings.SELECT2_CSS,
+                # static('css/select2-bootstrap.css'),
+                '//cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.6/select2-bootstrap.min.css',)}
+        )
+
+    media = property(_get_media)

demo/requirements.txt

@@ -1 +1,2 @@
 Django==1.10.5
+Django-Select2==5.8.10