Support multiple selectbox

app/views/settings/_searchable_selectbox_settings.html.erb

@@ -1,4 +1,9 @@
 <p>
-    <%= label_tag('settings[enabled]', I18n.t(:label_enable_seachable_selectbox)) %>
-    <%= check_box_tag('settings[enabled]', 1, settings['enabled']) %>
-</p>
+  <%= label_tag('settings[enabled]', I18n.t(:label_enable_seachable_selectbox)) %>
+  <%= check_box_tag('settings[enabled]', 1, settings['enabled']) %>
+</p>
+<p>
+  <%= label_tag('settings[enabled_multiple_selectbox]', I18n.t(:label_enable_multiple_selectbox)) %>
+  <%= hidden_field_tag 'settings[enabled_multiple_selectbox]', 0, class: 'enabled_multiple_selectbox' %>
+  <%= check_box_tag('settings[enabled_multiple_selectbox]', 1, Setting.plugin_redmine_searchable_selectbox['enabled_multiple_selectbox'].to_s == '1', class: 'enabled_multiple_selectbox') %>
+</p>

assets/javascripts/searchable_selectbox.js

@@ -48,15 +48,19 @@ $(function() {
     var oldAddFilter = window.addFilter;
     window.addFilter = function(field, operator, values){
       oldAddFilter(field, operator, values);
-      $('#filters-table select:not([multiple]):not([data-remote]):not(.select2-hidden-accessible)').select2();
+      $('#filters-table select:not([data-remote]):not(.select2-hidden-accessible)'+selectorForMultipleSelectbox()).select2();
       $('#select2-add_filter_select-container.select2-selection__rendered').text('');
     }
 
     var oldToggleMultiSelect = window.toggleMultiSelect;
     window.toggleMultiSelect = function(el){
       oldToggleMultiSelect(el);
       if (el.attr('multiple')) {
-        el.select2('destroy');
+        if (window.enabledMultipleSelectboxSearchable === true) {
+          el.select2();
+        } else {
+          el.select2('destroy');
+        }
       } else {
         el.select2();
       }
@@ -70,7 +74,7 @@ function replaceSelect2() {
   if ($('body').hasClass('controller-workflows')) {
     return;
   } else {
-    var selectInTabular = $('.tabular .splitcontent select:not([multiple]):not([data-remote]):not(.select2-hidden-accessible)');
+    var selectInTabular = $('.tabular .splitcontent select:not([data-remote]):not(.select2-hidden-accessible)'+selectorForMultipleSelectbox());
     if (selectInTabular.length) {
       selectInTabular.select2({
         width: 'style'
@@ -79,7 +83,7 @@ function replaceSelect2() {
       });
     }
 
-    var other = $('select:not([multiple]):not([data-remote]):not(.select2-hidden-accessible)');
+    var other = $('select:not([data-remote]):not(.select2-hidden-accessible)'+selectorForMultipleSelectbox());
     if (other.length) {
       other.select2().on('select2:select', function() {
         retriggerChangeIfNativeEventExists($(this));
@@ -111,4 +115,12 @@ function retriggerChangeIfNativeEventExists(element) {
   if (element.data('use-add-change-event-listener') && typeof Rails != 'undefined') {
     Rails.fire(element[0], 'change')
   }
-}
+}
+
+function selectorForMultipleSelectbox() {
+  if (window.enabledMultipleSelectboxSearchable === true) {
+    return ':not(.query-columns [multiple])'
+  } else {
+    return ':not([multiple])'
+  }
+}

assets/stylesheets/searchable_selectbox.css

@@ -1,4 +1,4 @@
-.select2-container--default .select2-selection--single {
+.select2-container--default .select2-selection {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -15,8 +15,13 @@
   font-family: Verdana, sans-serif;
 }
 
-.select2-container--default .select2-selection--single:focus {
-  border: 1px solid #5ad;
+.select2-container--default .select2-selection--multiple {
+  height: auto;
+}
+
+.select2-container--default .select2-selection:focus,
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: 1px solid #5ad !important;
   outline: none;
 }
 
@@ -25,7 +30,7 @@
   font-family: Verdana, sans-serif;
 }
 
-.select2-container--default .select2-selection--single .select2-selection__rendered {
+.select2-container--default .select2-selection .select2-selection__rendered {
   color: #333;
   line-height: 22px;
 }
@@ -35,54 +40,77 @@ fieldset#filters td.values .select2-container--default {
   max-width: 230px;
   min-width: 140px;
 }
+
 .tabular .select2-container {
   min-width: 150px;
 }
+
 .select2-container {
   min-width: 100px;
 }
+
 .tabular .splitcontent .select2-container {
   width: 75%;
   max-width: 300px;
 }
-#add_filter_select + .select2-container,
-#group_by + .select2-container {
+
+#add_filter_select+.select2-container,
+#group_by+.select2-container {
   min-width: 200px;
 }
 
 .select2-results__options::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 12px;
 }
+
 .select2-results__options::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: #00000080;
   box-shadow: 0 0 1px #ffffff80;
 }
+
 .select2-results__options li {
   padding: 3px 6px;
 }
 
 /* Increase the height of the select box */
-.select2-container--default .select2-results>.select2-results__options{
+.select2-container--default .select2-selection--single .select2-results>.select2-results__options {
   max-height: 450px;
 }
 
 /* Change the style referring to the default theme of Redmine */
 .select2-search--dropdown input.select2-search__field {
-  background: #fff url(../../../images/magnifier.png) no-repeat 2px 50%;
+  background: #fff url(../../../../images/magnifier.png) no-repeat 2px 50%;
   padding-left: 20px;
 }
+
 .select2-search--dropdown input.select2-search__field:focus {
   border: 1px solid #5ad;
   outline: none;
 }
+
 li.select2-results__option--highlighted[role="option"][aria-selected] {
   background-color: #759FC2;
   color: #fff;
 }
+
 .select2-dropdown {
   padding-bottom: 5px;
   box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .5);
   border: none;
-}
+}
+
+.select2-selection--multiple:before {
+  content: "";
+  position: absolute;
+  right: 7px;
+  top: 42%;
+  border-top: 5px solid #888;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
+
+.query-columns select[multiple] {
+  min-height: 200px;
+}

config/locales/en.yml

@@ -1,2 +1,3 @@
 en:
-  label_enable_seachable_selectbox: Enable searchable selectbox
+  label_enable_seachable_selectbox: Enable searchable selectbox
+  label_enable_multiple_selectbox: Make the multiple selection box searchable

config/locales/ja.yml

@@ -1,2 +1,3 @@
 ja:
-  label_enable_seachable_selectbox: Searchable selectboxを使用
+  label_enable_seachable_selectbox: Searchable selectboxを使用
+  label_enable_multiple_selectbox: 複数選択可能なセレクトボックスも検索可能にする

init.rb

@@ -6,7 +6,7 @@
   description "This plugin changes Redmine's selectbox searchable."
   version '0.1.10'
 
-  settings default: {'enabled' => 1}, partial: 'settings/searchable_selectbox_settings'
+  settings default: {'enabled' => 1, 'enabled_multiple_selectbox' => 1}, partial: 'settings/searchable_selectbox_settings'
 end
 
 Rails.configuration.to_prepare do

lib/searchable_selectbox/hook_listener.rb

@@ -3,10 +3,13 @@ class HookListener < Redmine::Hook::ViewListener
     def view_layouts_base_html_head(context)
       return '' unless Setting.plugin_redmine_searchable_selectbox['enabled']
 
-      stylesheet_link_tag("select2.min", :plugin => "redmine_searchable_selectbox") +
-      stylesheet_link_tag("searchable_selectbox", :plugin => "redmine_searchable_selectbox") +
-      javascript_include_tag("select2.full.min.js", :plugin => "redmine_searchable_selectbox") +
-      javascript_include_tag("searchable_selectbox.js", :plugin => "redmine_searchable_selectbox")
+      tags =
+        stylesheet_link_tag("select2.min", :plugin => "redmine_searchable_selectbox") +
+        stylesheet_link_tag("searchable_selectbox", :plugin => "redmine_searchable_selectbox") +
+        javascript_include_tag("select2.full.min.js", :plugin => "redmine_searchable_selectbox") +
+        javascript_include_tag("searchable_selectbox.js", :plugin => "redmine_searchable_selectbox")
+      tags += javascript_tag('var enabledMultipleSelectboxSearchable = true;') if Setting.plugin_redmine_searchable_selectbox['enabled_multiple_selectbox'].to_i == 1
+      tags
     end
   end
 end