Change chosen To select2 lib

apps/static/css/style.css

@@ -969,17 +969,43 @@ button.dim:active:before {
   position: relative;
   width: 100%;
 }
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #1ab394;
+  color: white;
+}
+
+.select2-selection--multiple {
+  border: 1px solid #e5e6e7 !important;
+  cursor: text !important;
+}
+
+/*.select2-container--classic .select2-selection--multiple:focus {*/
+    /*border: 1px solid #1ab394;*/
+/*}*/
+
+.select2-container--forcus {
+  border: 1px solid #1AB394 !important;
+}
+
+.select2-selection__choice,
 .chosen-container-multi .chosen-choices li.search-choice {
-  background: #f1f1f1;
-  border: 1px solid #ededed;
-  border-radius: 2px;
-  box-shadow: none;
-  color: #333333;
-  cursor: default;
-  line-height: 13px;
-  margin: 3px 0 3px 5px;
-  padding: 3px 20px 3px 5px;
-  position: relative;
+  background: #f1f1f1 !important;
+  border: 1px solid #e5e6e7 !important;
+  /*border: 1px solid #ededed;*/
+  border-radius: 2px !important;
+  box-shadow: none !important;
+  color: #333333 !important;
+  cursor: default !important;
+  line-height: 13px !important;
+  /*margin: 3px 0 3px 5px !important;*/
+  padding: 3px 20px 3px 5px !important;
+  position: relative !important;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: 1px solid #1ab394 !important;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
 }
 
 .chosen-container .chosen-results li.highlighted {

apps/users/forms.py

@@ -21,7 +21,7 @@ class UserAddForm(ModelForm):
         }
 
         widgets = {
-            'groups': forms.SelectMultiple(attrs={'class': 'chosen-select', 'data-placeholder': '请选择用户组'}),
+            'groups': forms.SelectMultiple(attrs={'class': 'select2', 'data-placeholder': '请选择用户组'}),
         }
 
 

apps/users/templates/users/_user.html

@@ -2,9 +2,9 @@
 {% load static %}
 {% load bootstrap %}
 {% block custom_head_css_js %}
-    <link href="{% static "css/plugins/chosen/chosen.css" %}" rel="stylesheet">
+    <link href="{% static "css/plugins/select2/select2.min.css" %}" rel="stylesheet">
     <link href="{% static "css/plugins/datepicker/datepicker3.css" %}" rel="stylesheet">
-    <script src="{% static "js/plugins/chosen/chosen.jquery.min.js" %}"></script>
+    <script src="{% static "js/plugins/select2/select2.full.min.js" %}"></script>
 {% endblock %}
 
 {% block content %}
@@ -80,16 +80,7 @@
     <script src="{% static 'js/plugins/datapicker/bootstrap-datepicker.js' %}"></script>
     <script>
         $(document).ready(function () {
-            var config = {
-                '.chosen-select'           : {},
-                '.chosen-select-deselect'  : {allow_single_deselect:true},
-                '.chosen-select-no-single' : {disable_search_threshold:10},
-                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
-                '.chosen-select-width'     : {width:"95%"}
-            };
-            for (var selector in config) {
-                $(selector).chosen(config[selector]);
-            }
+            $('.select2').select2();
 
             $('.input-group.date').datepicker({
                 todayBtn: "linked",

apps/users/templates/users/user_detail.html

@@ -4,8 +4,8 @@
 {% load static %}
 
 {% block custom_head_css_js %}
-    <link href="{% static "css/plugins/chosen/chosen.css" %}" rel="stylesheet">
-    <script src="{% static "js/plugins/chosen/chosen.jquery.min.js" %}"></script>
+    <link href="{% static "css/plugins/select2/select2.min.css" %}" rel="stylesheet">
+    <script src="{% static "js/plugins/select2/select2.full.min.js" %}"></script>
 {% endblock %}
 {% block content %}
     <div class="wrapper wrapper-content animated fadeInRight">
@@ -192,7 +192,7 @@
                                         <form>
                                             <tr>
                                                 <td colspan="2" class="no-borders">
-                                                    <select data-placeholder="选择用户组" class="chosen-select" style="width: 100%" multiple="" tabindex="4">
+                                                    <select data-placeholder="选择用户组" class="select2" style="width: 100%" multiple="" tabindex="4">
                                                         {% for group in groups %}
                                                         <option value="{{ group.id }}">{{ group.name }}</option>
                                                         {% endfor %}
@@ -208,7 +208,7 @@
 
                                         {% for group in user.groups.all %}
                                         <tr>
-                                            <td width="40%"><b style="font-size: medium">{{ group.name }}</b></td>
+                                            <td ><b>{{ group.name }}</b></td>
                                             <td>
                                                 <button class="btn btn-danger btn-sm" type="button" style="float: right;"><i class="fa fa-minus"></i></button>
                                             </td>
@@ -230,16 +230,7 @@
 {% block custom_foot_js %}
     <script>
         $(document).ready(function () {
-            var config = {
-                '.chosen-select'           : {},
-                '.chosen-select-deselect'  : {allow_single_deselect:true},
-                '.chosen-select-no-single' : {disable_search_threshold:10},
-                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
-                '.chosen-select-width'     : {width:"95%"}
-            };
-            for (var selector in config) {
-                $(selector).chosen(config[selector]);
-            }
+            $('.select2').select2();
         })
     </script>
 {% endblock %}
\ No newline at end of file