Ui Bibz - Multi select field

Multi Select Field(ui_multi_select_field)

UiBibz::Ui::Core::Forms::Selects::MultiSelectField

This component is based on the library bootstrap-multiselect.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:

content[value/block]
options[hash]<default: {}>
html_options[hash]<default: {}>

 # by variable 
 ui_multi_select_field name, options, html_options 

 # or by block 
 ui_multi_select_field options, html_options do 
   name 
 end

Options

The specific options for this component are:

status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
state[symbol](:disabled, :active)(use component state method)
option_tags[array/object]
clickable_opt_group[boolean]
collapsible_opt_group[boolean]
searchable[boolean]
select_all_options[boolean]
connect[hash]
append[string/html]
prepend[string/html]
cache[string](use to cache your component)
controller[string](use component stimulus-options method)
action[string](use component stimulus-options method)
target[string](use component stimulus-options method)

Examples

Some examples explain how to use the options present in the component.

Multi Select Field

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_multi_select_field 'example', option_tags: option_tags

<select name="example1[]" id="example1" class="btn-primary btn multi-select" multiple="multiple" style="display: none;">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 4"> option 4</label></a></li>
  </ul>
</div>

Option group clickable

grouped_options = { "North America" => [["United states","US"], "Canada"], "Europe" => ["Denmark","Germany","France"] }
ui_multi_select_field "example", { clickable_opt_group: true, option_tags: grouped_options_for_select(grouped_options) }

<select name="example2[]" id="example2" data-enable-clickable-opt-groups="true" class="btn-primary btn multi-select" multiple="multiple" style="display: none;">
  <optgroup label="North America">
    <option value="US">United states</option>
    <option value="Canada">Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="Denmark">Denmark</option>
    <option value="Germany">Germany</option>
    <option value="France">France</option>
  </optgroup>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li class="multiselect-item group"><label class="multiselect-group">North America</label></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="US"> United states</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="Canada"> Canada</label></a></li>
    <li class="multiselect-item group"><label class="multiselect-group">Europe</label></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="Denmark"> Denmark</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="Germany"> Germany</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="France"> France</label></a></li>
  </ul>
</div>

Options group collapsible

grouped_options = { "North America" => [["United states","US"], "Canada"], "Europe" => ["Denmark","Germany","France"] }
ui_multi_select_field "example", { collapsible_opt_group: true, option_tags: grouped_options_for_select(grouped_options) }

<select name="example2[]" id="example2" data-enable-collapsible-opt-groups="true" class="btn-primary btn multi-select" multiple="multiple" style="display: none;">
  <optgroup label="North America">
    <option value="US">United states</option>
    <option value="Canada">Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="Denmark">Denmark</option>
    <option value="Germany">Germany</option>
    <option value="France">France</option>
  </optgroup>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li class="multiselect-item group"><label class="multiselect-group">North America</label></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="US"> United states</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="Canada"> Canada</label></a></li>
    <li class="multiselect-item group"><label class="multiselect-group">Europe</label></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="Denmark"> Denmark</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="Germany"> Germany</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="France"> France</label></a></li>
  </ul>
</div>

Searchable options

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_multi_select_field 'example', searchable: true, option_tags: option_tags

<select name="example1[]" id="example1" data-enable-filtering="true" class="btn-primary btn multi-select" multiple="multiple" style="display: none;">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li class="multiselect-item filter" value="0">
      <div class="">
        <input class="form-control multiselect-search" type="text" placeholder="Search">
      </div>
    </li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 4"> option 4</label></a></li>
  </ul>
</div>

Size

The size option has following symbols for argument:

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_multi_select_field "lg", size: :lg, option_tags: option_tags
ui_multi_select_field "md", size: :md, option_tags: option_tags
ui_multi_select_field "sm", size: :sm, option_tags: option_tags

<select name="lg[]" id="example1" class="btn-secondary btn-lg multi-select-field" multiple="multiple" style="display: none;">
  <option value="0">option 0</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-secondary btn-lg multi-select-field" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="4"> option 4</label></a></li>
  </ul>
</div>

<select name="md[]" id="example1" class="btn-secondary btn-md multi-select-field" multiple="multiple" style="display: none;">
  <option value="0">option 0</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-secondary btn-md multi-select-field" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="4"> option 4</label></a></li>
  </ul>
</div>

<select name="sm[]" id="example1" class="btn-secondary btn-sm multi-select-field" multiple="multiple" style="display: none;">
  <option value="0">option 0</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-secondary btn-sm multi-select-field" data-toggle="dropdown" title="None selected" aria-expanded="false">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 31px, 0px); top: 0px; left: 0px; will-change: transform;">
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="4"> option 4</label></a></li>
  </ul>
</div>

Select all options

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_multi_select_field "example", select_all_options: true, option_tags: option_tags

<select name="example1[]" id="example1" data-include-select-all-option="true" class="btn-primary btn multi-select" multiple="multiple" style="display: none;">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li class="multiselect-item multiselect-all"><a href="javascript:void(0);" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all">  Select all</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 4"> option 4</label></a></li>
  </ul>
</div>

Status option

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_multi_select_field "primary", status: :primary, option_tags: option_tags
ui_multi_select_field "secondary", status: :secondary, option_tags: option_tags
ui_multi_select_field "success", status: :success, option_tags: option_tags
ui_multi_select_field "warning", status: :warning, option_tags: option_tags
ui_multi_select_field "danger", status: :danger, option_tags: option_tags
ui_multi_select_field "link", status: :link, option_tags: option_tags

<select name="primary[]" id="primary" class="btn-primary btn multi-select" multiple="multiple" style="display: none;">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 4"> option 4</label></a></li>
  </ul>
</div>

Number displayed

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_multi_select_field "number_displayed", option_tags: option_tags, number_displayed: 1

<select name="primary[]" id="primary" class="btn-primary btn multi-select" multiple="multiple" style="display: none;">
  <option value="option 0">option 0</option>
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>
<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">None selected <b class="caret"></b></button>
  <ul class="multiselect-container dropdown-menu">
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 0"> option 0</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 1"> option 1</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 2"> option 2</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 3"> option 3</label></a></li>
    <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="option 4"> option 4</label></a></li>
  </ul>
</div>

Field Connected

You can connect several components together using option connect. With this option, you can determine the target, the trigger event, and the connection mode.

You can choose the connection mode: local or remote. If you choose local mode, you will need to populate the data with an array.
If you choose the remote mode, you must fill in the url so that the component can retrieve the information in Ajax. The input name will be send in parameter.

Output data, whether local or remote, must be written in this way: [{ value: Integer||String, text: String||Integer, connect_option_id: Integer||String }, {...}] .

To have optgroup, format must be like that: { label1: [{ text: String||Integer, value: String||Integer, connect_option_id: Integer||String }, {...}], label2: [...]}

Ruby

connect: {
  event: String, # change|click|change click|... <default: 'change'>
  mode:  String, # local|remote <default: 'remote'>
  target: {
    selector:  String, # .my-target|#my-target
    data:      Array,  # [{ text: 'option', value: 1, connect_option_id: 2}]
    url:       String, # url_data.html'
  }
}

You can connect an input to any other input:

	Select field	Dropdown select field	Multi column field	Multi select field
Select field
Dropdown select field
Multi column field
Multi select field

= Done, = In progress

Connected (remote)

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First multi column input
connect = { mode: "remote", target: { selector: "#example_1_target", url: components_forms_selects_multi_column_field_path }}
ui_multi_select_field "example 1", option_tags: option_tags, connect: connect
# Second select input
ui_multi_select_field "example 1 target", option_tags: option_tags

""

Connected (local)

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
# First Select input
options_data = 5.times.map{ |o| 5.times.map{ |i| { text: "New option #{ o }.#{ i }", value: i, connect_option_id: o }}}.flatten
connect      = { mode: "local", target: { selector: "#example_2_target", data: options_data }}}
ui_multi_select_field "example 2", { option_tags: option_tags, connect: connect }
# Second Select input
ui_multi_select_field "example 2 target", option_tags: options_html

""

Refresh Connected

Option refresh take same arguments than connect option.

option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
connect     = { target: { url: components_forms_selects_select_field_path }}
ui_multi_select_field "example 3", option_tags: option_tags, refresh: connect

<div class="input-group select-field-refresh">
  <select name="example 3 target[]" id="example_3_target" class="btn-secondary btn multi-select" multiple="multiple" style="display: none;">
  <option value="0">option 0</option>
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
  </select>
  <div class="btn-group">
    <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">
      None selected <b class="caret"></b>
    </button>
    <ul class="multiselect-container dropdown-menu">
      <li>
        <a href="javascript:void(0);">
          <label class="checkbox"><input type="checkbox" value="0"> option 0</label>
        </a>
      </li>
      <li>
        <a href="javascript:void(0);">
          <label class="checkbox"><input type="checkbox" value="1"> option 1</label>
        </a>
      </li>
      <li>
        <a href="javascript:void(0);">
          <label class="checkbox"><input type="checkbox" value="2"> option 2</label>
        </a>
      </li>
      <li>
        <a href="javascript:void(0);">
          <label class="checkbox"><input type="checkbox" value="3"> option 3</label>
        </a>
        </li>
      <li>
        <a href="javascript:void(0);">
          <label class="checkbox"><input type="checkbox" value="4"> option 4</label>
        </a>
      </li>
    </ul>
</div>
<span class="input-group-btn">
  <button data-connect='{"events":"click","mode":"remote","target":{"selector":"#example_3_target","url":"/components/forms/selects/select-field","data":[]}}' class="btn-primary ui-bibz-connect input-refresh-button btn">
    <i class="glyph fa fa-refresh"></i>
  </button>
</span>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_multi_select_field. You can use Simple Form input options and Ui Bibz ui_multi_select_field options.

Then in your view, you can insert your input dropdown select field. This simple form component is based on simple_form collection
Collection inputs accept two other options beside collections:

label_method => the label method to be applied to the collection to retrieve the label (use this instead of the text_method option in collection_select)
value_method => the value method to be applied to the collection to retrieve the value

label_method and value_method are optional

Ruby

ui_form_for(@user) do |f|
  ...
  f.association :country, as: :ui_multi_select_field, collection: @countries, label_method: :name, value_method: :id
  ...
end

You can use `grouped: true` option to group collection
Grouped collection inputs accept the same :label_method and :value_method options, which will be used to retrieve label/value attributes for the option tags. Besides that, you can give:

group_method => the method to be called on the given collection to generate the options for each group (required)
group_label_method => the label method to be applied on the given collection to retrieve the label for the optgroup (Simple Form will attempt to guess the best one the same way it does with :label_method)

Ruby

ui_form_for(@search) do |f|
  ...
  f.input :country, as: :ui_multi_select_field, grouped: true, collection: @collection,  group_method: :last, label_method: :name, value_method: :value
  ...
end

Documentation

You can add option refresh in your association.

Ruby

ui_form_for(@user) do |f|
  ...
  f.association :country, as: :ui_multi_select_field, refresh: { target: { url: components_forms_selects_select_field_path }}, collection: @countries, label_method: :name, value_method: :id
  ...
end