Replace Chosen by Select2

flask_admin/static/js/filters.js

@@ -41,7 +41,7 @@ var AdminFilters = function(element, filters_element, operations, options, types
             $select.append($('<option/>').attr('value', this[0]).text(this[1]));
         });
 
-        $select.chosen();
+        $select.select2();
 
         var optId = op[0][0];
 
@@ -58,7 +58,7 @@ var AdminFilters = function(element, filters_element, operations, options, types
                     .appendTo($el);
             });
 
-            $field.chosen();
+            $field.select2();
         } else
         {
             $field = $('<input type="text" class="filter-val" />')

flask_admin/static/js/form.js

@@ -3,10 +3,10 @@
       this.applyStyle = function(el, name) {
         switch (name) {
             case 'chosen':
-                $(el).chosen();
+                $(el).select2();
                 break;
             case 'chosenblank':
-                $(el).chosen({allow_single_deselect: true});
+                $(el).select2({allowClear: true});
                 break;
             case 'datepicker':
                 $(el).datepicker();
@@ -49,8 +49,8 @@
       };
 
       this.applyGlobalStyles = function(parent) {
-        $('[data-role=chosen]', parent).chosen();
-        $('[data-role=chosenblank]', parent).chosen({allow_single_deselect: true});
+        $('[data-role=chosen]', parent).select2();
+        $('[data-role=chosenblank]', parent).select2({allowClear: true});
         $('[data-role=datepicker]', parent).datepicker();
         $('[data-role=datetimepicker]', parent).datepicker({displayTime: true});
       };

flask_admin/templates/admin/master.html

@@ -74,7 +74,7 @@
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
     <script src="{{ url_for('admin.static', filename='bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
-    <script src="{{ url_for('admin.static', filename='chosen/chosen.jquery.min.js') }}" type="text/javascript"></script>
+    <script src="{{ url_for('admin.static', filename='select2/select2.min.js') }}" type="text/javascript"></script>
 
     {% block tail %}
     {% endblock %}

flask_admin/templates/admin/model/create.html

@@ -2,7 +2,7 @@
 {% import 'admin/lib.html' as lib with context %}
 
 {% block head %}
-    <link href="{{ url_for('admin.static', filename='chosen/chosen.css') }}" rel="stylesheet">
+    <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
     <link href="{{ url_for('admin.static', filename='css/datepicker.css') }}" rel="stylesheet">
 {% endblock %}
 

flask_admin/templates/admin/model/edit.html

@@ -2,7 +2,7 @@
 {% import 'admin/lib.html' as lib with context %}
 
 {% block head %}
-    <link href="{{ url_for('admin.static', filename='chosen/chosen.css') }}" rel="stylesheet">
+    <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
     <link href="{{ url_for('admin.static', filename='css/datepicker.css') }}" rel="stylesheet">
 {% endblock %}
 

flask_admin/templates/admin/model/list.html

@@ -3,7 +3,7 @@
 {% import 'admin/actions.html' as actionlib with context %}
 
 {% block head %}
-    <link href="{{ url_for('admin.static', filename='chosen/chosen.css') }}" rel="stylesheet">
+    <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
     <link href="{{ url_for('admin.static', filename='css/datepicker.css') }}" rel="stylesheet">
 {% endblock %}