Multi Column Field(ui_multi_column_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Selects::MultiColumnField

This component is based on the library Jquery multiselect.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 ui_multi_column_field name, options, html_options 

 # or by block 
 ui_multi_column_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • connect[hash]
  • controller[string](use component stimulus-options method)
  • option_tags[array/object]
  • refresh[hash]
  • searchable[boolean]
  • selectable_opts_group[boolean]
  • state[symbol](:disabled, :active)(use component state method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Examples

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

Multi Column Field

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>

Selectable optgroup option

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>

Searchable option

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>

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: [...]} 

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
Select field
Dropdown select field
Multi column field
= Done, = In progress

Connected (remote)


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>

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_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>

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_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