UiBibz::Ui::Core::Forms::Selects::MultiSelectField
This component is based on the library bootstrap-multiselect.
# by variable
ui_multi_select_field name, options, html_options
# or by block
ui_multi_select_field options, html_options do
name
end
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>
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>
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>
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
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>
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>
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>
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>
You can connect several components together using option connect
.
With this option, you can determine the target, the trigger event, and the connection mode.
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: [...]}
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 |
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
""
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
""
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>
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:
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:
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
You can add option refresh
in your association.
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