UiBibz::Ui::Core::Forms::Selects::MultiColumnField
This component is based on the library Jquery multiselect.
# by variable
ui_multi_column_field name, options, html_options
# or by block
ui_multi_column_field options, html_options do
name
end
option_tags = options_for_select(10.times.map{ |i| ["option #{i}", i] })
ui_multi_column_field 'example', option_tags: option_tags
<select name="example1[]" id="example1" class="multi-column" multiple="multiple" style="position: absolute; left: -9999px;">
<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>
<option value="option 5">option 5</option>
<option value="option 6">option 6</option>
<option value="option 7">option 7</option>
<option value="option 8">option 8</option>
<option value="option 9">option 9</option>
</select>
<div class="ms-container" id="ms-example1">
<div class="ms-selectable">
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selectable" id="-79019195-selectable"><span>option 0</span></li>
<li class="ms-elem-selectable" id="-79019194-selectable"><span>option 1</span></li>
<li class="ms-elem-selectable" id="-79019193-selectable"><span>option 2</span></li>
<li class="ms-elem-selectable" id="-79019192-selectable"><span>option 3</span></li>
<li class="ms-elem-selectable" id="-79019191-selectable"><span>option 4</span></li>
<li class="ms-elem-selectable" id="-79019190-selectable"><span>option 5</span></li>
<li class="ms-elem-selectable" id="-79019189-selectable"><span>option 6</span></li>
<li class="ms-elem-selectable" id="-79019188-selectable"><span>option 7</span></li>
<li class="ms-elem-selectable" id="-79019187-selectable"><span>option 8</span></li>
<li class="ms-elem-selectable" id="-79019186-selectable"><span>option 9</span></li>
</ul>
</div>
<div class="ms-selection">
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selection" id="-79019195-selection" style="display: none;"><span>option 0</span></li>
<li class="ms-elem-selection" id="-79019194-selection" style="display: none;"><span>option 1</span></li>
<li class="ms-elem-selection" id="-79019193-selection" style="display: none;"><span>option 2</span></li>
<li class="ms-elem-selection" id="-79019192-selection" style="display: none;"><span>option 3</span></li>
<li class="ms-elem-selection" id="-79019191-selection" style="display: none;"><span>option 4</span></li>
<li class="ms-elem-selection" id="-79019190-selection" style="display: none;"><span>option 5</span></li>
<li class="ms-elem-selection" id="-79019189-selection" style="display: none;"><span>option 6</span></li>
<li class="ms-elem-selection" id="-79019188-selection" style="display: none;"><span>option 7</span></li>
<li class="ms-elem-selection" id="-79019187-selection" style="display: none;"><span>option 8</span></li>
<li class="ms-elem-selection" id="-79019186-selection" style="display: none;"><span>option 9</span></li>
</ul>
</div>
</div>
grouped_options = { "North America" => [["United states","US"], "Canada"], "Europe" => ["Denmark","Germany","France"] }
ui_multi_column_field "example", { option_tags: grouped_options_for_select(grouped_options), selectable_opt_group: true }
<select name="example2[]" id="example2" data-selectable-optgroup="true" class="multi-column" multiple="multiple" style="position: absolute; left: -9999px;">
<optgroup label="North America">
<option value="US">United statuss</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="ms-container" id="ms-example2">
<div class="ms-selectable">
<ul class="ms-list" tabindex="-1">
<li class="ms-optgroup-container" id="optgroup-selectable-1732130227">
<ul class="ms-optgroup">
<li class="ms-optgroup-label"><span>North America</span></li>
<li class="ms-elem-selectable" id="2718-selectable"><span>United statuss</span></li>
<li class="ms-elem-selectable" id="2011108078-selectable"><span>Canada</span></li>
</ul>
</li>
<li class="ms-optgroup-container" id="optgroup-selectable-2086969794">
<ul class="ms-optgroup">
<li class="ms-optgroup-label"><span>Europe</span></li>
<li class="ms-elem-selectable" id="-1077783494-selectable"><span>Denmark</span></li>
<li class="ms-elem-selectable" id="1588421523-selectable"><span>Germany</span></li>
<li class="ms-elem-selectable" id="2112320571-selectable"><span>France</span></li>
</ul>
</li>
</ul>
</div>
<div class="ms-selection">
<ul class="ms-list" tabindex="-1">
<li class="ms-optgroup-container" id="optgroup-selection-1732130227">
<ul class="ms-optgroup">
<li class="ms-optgroup-label" style="display: none;"><span>North America</span></li>
<li class="ms-elem-selection" id="2718-selection" style="display: none;"><span>United statuss</span></li>
<li class="ms-elem-selection" id="2011108078-selection" style="display: none;"><span>Canada</span></li>
</ul>
</li>
<li class="ms-optgroup-container" id="optgroup-selection-2086969794">
<ul class="ms-optgroup">
<li class="ms-optgroup-label" style="display: none;"><span>Europe</span></li>
<li class="ms-elem-selection" id="-1077783494-selection" style="display: none;"><span>Denmark</span></li>
<li class="ms-elem-selection" id="1588421523-selection" style="display: none;"><span>Germany</span></li>
<li class="ms-elem-selection" id="2112320571-selection" style="display: none;"><span>France</span></li>
</ul>
</li>
</ul>
</div>
</div>
option_tags = options_for_select(5.times.map{ |i| ["option #{i}", i] })
ui_multi_column_field 'example', { option_tags: option_tags, searchable: true }
<select name="example3[]" id="example3" data-searchable="true" class="multi-column" multiple="multiple" style="position: absolute; left: -9999px;">
<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>
<option value="option 5">option 5</option>
<option value="option 6">option 6</option>
<option value="option 7">option 7</option>
<option value="option 8">option 8</option>
<option value="option 9">option 9</option>
</select>
<div class="ms-container" id="ms-example3">
<div class="ms-selectable">
<input type="text" class="search-input form-control" autocomplete="off" placeholder="Search in selectable items">
<br>
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selectable" id="-79019195-selectable"><span>option 0</span></li>
<li class="ms-elem-selectable" id="-79019194-selectable"><span>option 1</span></li>
<li class="ms-elem-selectable" id="-79019193-selectable"><span>option 2</span></li>
<li class="ms-elem-selectable" id="-79019192-selectable"><span>option 3</span></li>
<li class="ms-elem-selectable" id="-79019191-selectable"><span>option 4</span></li>
<li class="ms-elem-selectable" id="-79019190-selectable"><span>option 5</span></li>
<li class="ms-elem-selectable" id="-79019189-selectable"><span>option 6</span></li>
<li class="ms-elem-selectable" id="-79019188-selectable"><span>option 7</span></li>
<li class="ms-elem-selectable" id="-79019187-selectable"><span>option 8</span></li>
<li class="ms-elem-selectable" id="-79019186-selectable"><span>option 9</span></li>
</ul>
</div>
<div class="ms-selection">
<input type="text" class="search-input form-control" autocomplete="off" placeholder="Search in selected items">
<br>
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selection" id="-79019195-selection" style="display: none;"><span>option 0</span></li>
<li class="ms-elem-selection" id="-79019194-selection" style="display: none;"><span>option 1</span></li>
<li class="ms-elem-selection" id="-79019193-selection" style="display: none;"><span>option 2</span></li>
<li class="ms-elem-selection" id="-79019192-selection" style="display: none;"><span>option 3</span></li>
<li class="ms-elem-selection" id="-79019191-selection" style="display: none;"><span>option 4</span></li>
<li class="ms-elem-selection" id="-79019190-selection" style="display: none;"><span>option 5</span></li>
<li class="ms-elem-selection" id="-79019189-selection" style="display: none;"><span>option 6</span></li>
<li class="ms-elem-selection" id="-79019188-selection" style="display: none;"><span>option 7</span></li>
<li class="ms-elem-selection" id="-79019187-selection" style="display: none;"><span>option 8</span></li>
<li class="ms-elem-selection" id="-79019186-selection" style="display: none;"><span>option 9</span></li>
</ul>
</div>
</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(10.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_column_field "example 1", option_tags: option_tags, connect: connect
# Second select input
ui_multi_column_field "example 1 target", option_tags: option_tags
<select name="example 1[]" id="example_1" data-connect="{'type':'remote','target':{'selector':'#example_1_target','component':'ui_multi_column_field','url':'/components/forms/selects/multi-column-field'}}" class="ui-bibz-connect multi-column" multiple="multiple" style="position: absolute; left: -9999px;">
<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>
<option value="5">option 5</option>
</select>
<div class="ms-container" id="ms-example_1">
<div class="ms-selectable">
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selectable" id="48-selectable">
<span>option 0</span>
</li>
<li class="ms-elem-selectable" id="49-selectable">
<span>option 1</span>
</li>
<li class="ms-elem-selectable" id="50-selectable" style="display: list-item;">
<span>option 2</span>
</li>
<li class="ms-elem-selectable" id="51-selectable">
<span>option 3</span>
</li>
<li class="ms-elem-selectable" id="52-selectable" style="display: list-item;">
<span>option 4</span>
</li>
<li class="ms-elem-selectable" id="53-selectable">
<span>option 5</span>
</li>
</ul>
</div>
<div class="ms-selection">
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selection" id="48-selection" style="display: none;">
<span>option 0</span>
</li>
<li class="ms-elem-selection" id="49-selection" style="display: none;">
<span>option 1</span>
</li>
<li class="ms-elem-selection ms-hover" id="50-selection" style="display: none;">
<span>option 2</span>
</li>
<li class="ms-elem-selection" id="51-selection" style="display: none;">
<span>option 3</span>
</li>
<li class="ms-elem-selection ms-hover" id="52-selection" style="display: none;">
<span>option 4</span>
</li>
<li class="ms-elem-selection" id="53-selection" style="display: none;">
<span>option 5</span>
</li>
</ul>
</div>
</div>
<br>
<select name="example 1 target[]" id="example_1_target" class="multi-column" multiple="multiple" style="position: absolute; left: -9999px;">
</select>
<div class="ms-container" id="ms-example_1_target">
<div class="ms-selectable">
<ul class="ms-list" tabindex="-1">
</ul>
</div>
<div class="ms-selection">
<ul class="ms-list" tabindex="-1">
</ul>
</div>
</div>
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_column_field "example 2", { option_tags: option_tags, connect: connect }
# Second Select input
ui_multi_column_field "example 2 target", option_tags: options_html
<select name="example 2[]" id="example_2" data-connect="{'mode':'local','target':{'selector':'#example_2_target','component':'ui_multi_column_field','data':[{'connect_option_id':0,'value':1,'text':'New option 1.0'},{'connect_option_id':0,'value':6,'text':'New option 2.0'},{'connect_option_id':1,'value':2,'text':'New option 1.1'},{'connect_option_id':1,'value':7,'text':'New option 2.1'},{'connect_option_id':2,'value':3,'text':'New option 1.2'},{'connect_option_id':2,'value':8,'text':'New option 2.2'},{'connect_option_id':3,'value':4,'text':'New option 1.3'},{'connect_option_id':3,'value':9,'text':'New option 2.3'},{'connect_option_id':4,'value':5,'text':'New option 1.4'},{'connect_option_id':4,'value':10,'text':'New option 2.4'}]}}" class="ui-bibz-connect multi-column" multiple="multiple" style="position: absolute; left: -9999px;">
<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="ms-container" id="ms-example_2">
<div class="ms-selectable">
<input type="text" class="search-input form-control" autocomplete="off" placeholder="Search in selectable items">
<br>
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selectable" id="48-selectable" style="display: list-item;">
<span>option 0</span>
</li>
<li class="ms-elem-selectable" id="49-selectable" style="display: list-item;">
<span>option 1</span>
</li>
<li class="ms-elem-selectable" id="50-selectable" style="display: list-item;">
<span>option 2</span>
</li>
<li class="ms-elem-selectable" id="51-selectable" style="display: list-item;">
<span>option 3</span>
</li>
<li class="ms-elem-selectable" id="52-selectable" style="display: list-item;">
<span>option 4</span>
</li>
</ul>
</div>
<div class="ms-selection">
<input type="text" class="search-input form-control" autocomplete="off" placeholder="Search in selected items">
<br>
<ul class="ms-list" tabindex="-1">
<li class="ms-elem-selection ms-hover" id="48-selection" style="display: none;">
<span>option 0</span>
</li>
<li class="ms-elem-selection ms-hover" id="49-selection" style="display: none;">
<span>option 1</span>
</li>
<li class="ms-elem-selection ms-hover" id="50-selection" style="display: none;">
<span>option 2</span>
</li>
<li class="ms-elem-selection ms-hover" id="51-selection" style="display: none;">
<span>option 3</span>
</li>
<li class="ms-elem-selection ms-hover" id="52-selection" style="display: none;">
<span>option 4</span>
</li>
</ul>
</div>
</div>
<br>
<select name="example 2 target[]" id="example_2_target" class="multi-column" multiple="multiple" style="position: absolute; left: -9999px;"></select>
<div class="ms-container" id="ms-example_2_target">
<div class="ms-selectable">
<br>
<ul class="ms-list" tabindex="-1">
</ul>
</div>
<div class="ms-selection">
<br>
<ul class="ms-list" tabindex="-1">
</ul>
</div>
</div>
</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_column_field
. You can use Simple Form input options and Ui Bibz ui_multi_column_field options.
Then in your view, you can insert your input multi_column field.
ui_form_for(@search) do |f|
...
f.input :country, as: :ui_multi_column_field, collection: @countries
...
end