use select2 make admin filter searchable

Author: wuyue92tree

adminlteui/admin.py

@@ -48,6 +48,31 @@ def get_image_box():
         option_name='site_logo') else ''
 
 
+class ModelAdmin(admin.ModelAdmin):
+    select2_list_filter = ()
+
+    class Media:
+        css = {
+            "all": ("admin/components/select2/dist/css/select2.min.css",)
+        }
+        js = (
+            "admin/components/select2/dist/js/select2.min.js",
+        )
+
+    def changelist_view(self, request, extra_context=None):
+        view = super().changelist_view(request, extra_context)
+        cl = view.context_data.get('cl')
+        filter_specs = cl.filter_specs
+
+        for index, filter_spec in enumerate(filter_specs):
+            if filter_spec.field_path in self.select2_list_filter:
+                # flag to use select2
+                filter_spec.display_select2 = True
+                cl.filter_specs[index] = filter_spec
+        view.context_data['cl'] = cl
+        return view
+
+
 class GeneralOptionForm(forms.Form):
     site_title = forms.CharField(label=_('Site Title'),
                                  widget=widgets.AdminTextInputWidget(),

adminlteui/templates/admin/filter.html

@@ -1,15 +1,29 @@
 {% load i18n %}
 
 <div class="form-group" style="margin-bottom: 5px;">
-    <select class="form-control select2 select2-hidden-accessible search-filter" style="width: 100%;" tabindex="-1" aria-hidden="true" data-name="{{ field_name }}">
+    <select id="id_filter_{{ field_name }}" class="form-control search-filter" style="width: 100%;" tabindex="-1" aria-hidden="true">
         <option value="">{{ title }}</option>
         <option value="">---------</option>
         {% for choice in choices %}
-        {% if choice.name %}
-        <option data-name="{{ choice.name }}" value="{{ choice.value }}" {% if choice.selected %} selected {% endif %}>
-            {{ choice.display }}
-        </option>
-        {% endif %}
+            {% if choice.name %}
+                <option data-name="{{ choice.name }}" value="{{ choice.value }}" {% if choice.selected %} selected {% endif %}>
+                    {{ choice.display }}
+                </option>
+            {% endif %}
         {% endfor %}
     </select>
+    {% if spec.display_select2 %}
+    <script>
+        django.jQuery('#id_filter_{{ field_name }}').select2({
+            width: django.jQuery('#id_filter_{{ field_name }}').width() + 26
+        })
+        django.jQuery('#id_filter_{{ field_name }}').on('select2:select', function (e) {
+            if (e.params.data.id !=='') {
+                django.jQuery('#id_filter_{{ field_name }}').attr('name', e.params.data.element.dataset.name)
+            } else {
+                django.jQuery('#id_filter_{{ field_name }}').removeAttr('name')
+            }
+        });
+    </script>
+    {% endif %}
 </div>