We now use Select2 instead of chosen \o/

README.rst

@@ -33,7 +33,7 @@ Flask-Admin is extensively documented, you can find `documentation here <http://
 3rd Party Stuff
 ---------------
 
-Flask-Admin is built with help of `Twitter Bootstrap <http://twitter.github.com/bootstrap/>`_ and `Chosen <http://harvesthq.github.com/chosen/>`_.
+Flask-Admin is built with help of `Twitter Bootstrap <http://twitter.github.com/bootstrap/>`_ and `Select2 <https://github.com/ivaynberg/select2>`_.
 
 Kudos
 -----

flask_admin/contrib/sqlamodel/form.py

@@ -70,7 +70,7 @@ class AdminModelConverter(ModelConverterBase):
                 kwargs['query_factory'] = lambda: self.session.query(remote_model)
 
             if prop.direction.name == 'MANYTOONE':
-                return QuerySelectField(widget=form.ChosenSelectWidget(),
+                return QuerySelectField(widget=form.Select2Widget(),
                                         **kwargs)
             elif prop.direction.name == 'ONETOMANY':
                 # Skip backrefs
@@ -78,11 +78,11 @@ class AdminModelConverter(ModelConverterBase):
                     return None
 
                 return QuerySelectMultipleField(
-                                widget=form.ChosenSelectWidget(multiple=True),
+                                widget=form.Select2Widget(multiple=True),
                                 **kwargs)
             elif prop.direction.name == 'MANYTOMANY':
                 return QuerySelectMultipleField(
-                                widget=form.ChosenSelectWidget(multiple=True),
+                                widget=form.Select2Widget(multiple=True),
                                 **kwargs)
         else:
             # Ignore pk/fk

flask_admin/form.py

@@ -83,28 +83,30 @@ class TimeField(fields.Field):
             raise ValueError(gettext('Invalid time format'))
 
 
-class ChosenSelectWidget(widgets.Select):
+class Select2Widget(widgets.Select):
     """
-        `Chosen <http://harvesthq.github.com/chosen/>`_ styled select widget.
+        `Select2 <https://github.com/ivaynberg/select2>`_ styled select widget.
 
-        You must include chosen.js and form.js for styling to work.
+        You must include select2.js, form.js and select2 stylesheet for it to
+        work.
     """
     def __call__(self, field, **kwargs):
         if field.allow_blank and not self.multiple:
-            kwargs['data-role'] = u'chosenblank'
+            kwargs['data-role'] = u'select2blank'
         else:
-            kwargs['data-role'] = u'chosen'
+            kwargs['data-role'] = u'select2'
 
-        return super(ChosenSelectWidget, self).__call__(field, **kwargs)
+        return super(Select2Widget, self).__call__(field, **kwargs)
 
 
-class ChosenSelectField(fields.SelectField):
+class Select2Field(fields.SelectField):
     """
-        `Chosen <http://harvesthq.github.com/chosen/>`_ styled select field.
+        `Select2 <https://github.com/ivaynberg/select2>`_ styled select widget.
 
-        You must include chosen.js and form.js for styling to work.
+        You must include select2.js, form.js and select2 stylesheet for it to
+        work.
     """
-    widget = ChosenSelectWidget
+    widget = Select2Widget
 
 
 class DatePickerWidget(widgets.TextInput):

flask_admin/static/js/form.js

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

flask_admin/templates/admin/model/list.html

@@ -73,14 +73,14 @@
                     {% set filter = admin_view._filters[flt[0]] %}
                     <a href="#" class="btn remove-filter" title="{{ _gettext('Remove Filter') }}">
                         <span class="close-icon">&times;</span>&nbsp;{{ filters[flt[0]] }}
-                    </a><select class="filter-op" data-role="chosen">
+                    </a><select class="filter-op" data-role="select2">
                         {% for op in admin_view._filter_dict[filter.name] %}
                         <option value="{{ op[0] }}"{% if flt[0] == op[0] %} selected="selected"{% endif %}>{{ op[1] }}</option>
                         {% endfor %}
                     </select>
                     {%- set data = filter_data.get(flt[0]) -%}
                     {%- if data -%}
-                    <select name="flt{{ i }}_{{ flt[0] }}" class="filter-val" data-role="chosen">
+                    <select name="flt{{ i }}_{{ flt[0] }}" class="filter-val" data-role="select2">
                         {%- for d in data %}
                         <option value="{{ d[0] }}"{% if flt[1] == d[0] %} selected{% endif %}>{{ d[1] }}</option>
                         {%- endfor %}