Auto Complete Field(ui_auto_complete_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Texts::autoCompleteField

ui_auto_complete_field is a text_field which uses html datalist to auto complete results.

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_auto_complete_field name, options, html_options 

 # or by block 
 ui_auto_complete_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • append[html]Add a content before the field
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • option_tags[html]
  • prepend[html]Add a content after the field
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • value[string]Input's value

Examples

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

Auto Complete Field

ui_auto_complete_field 'example1', option_tags: options_for_select(5.times.map{ |i| "option #{i}" })

<input type="text" name="example1" id="example1" class="form-control" auto_complete="true" list="example1-datalist">
<datalist id="example1-datalist">
  <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>
</datalist>

Auto Complete Field surrounded

ui_auto_complete_field "example1", option_tags: options_for_select(5.times.map{ |i| "option #{i}" }), append: ui_glyph("pencil-alt"), prepend: ui_glyph("camera-retro")

<div class="input-group">
  <span class="input-group-addon"><i class="glyph fa fa-pencil-alt"></i></span>
  <input type="text" name="example1" id="example1" class="form-control" autocomplete="true" list="example1-datalist">
  <datalist id="example1-datalist">
    <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>
  </datalist>
  <span class="input-group-addon"><i class="glyph fa fa-camera-retro"></i></span>
</div>

Auto Complete Field options

ui_auto_complete_field "example1", status: :success, state: :disabled option_tags: options_for_select(5.times.map{ |i| "option #{i}" })

<input type="text" name="example1" id="example1" class="form-control" auto_complete="true" list="example1-datalist">
<datalist id="example1-datalist">
  <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>
</datalist>

Refresh Connected

Option refresh take same arguments than connect option.

refresh     = { mode: 'local', target: { url: components_forms_selects_select_field_path }}
option_tags = options_for_select(5.times.map{ |i| "option #{i}" })
ui_auto_complete_field 'example 3', option_tags: option_tags, refresh: refresh

<div class="field-refresh input-group">
  <input type="text" name="example 3 target" id="example_3_target" class="form-control auto-complete-field" autocomplete="true" list="example_3_target-datalist">
  <datalist id="example_3_target-datalist">
    <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>
  </datalist>
  <div class="input-group-btn">
    <span data-connect="{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#example_3_target-datalist&quot;,&quot;url&quot;:&quot;/components/forms/selects/select-field&quot;,&quot;data&quot;:[]}}" class="btn-primary ui-bibz-connect btn input-refresh-button">
      <i class="glyph fa fa-refresh">
      </i> </span>
  </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_auto_complete_field. You can use Simple Form input options and Ui Bibz ui_auto_complete_field options.

Then in your view, you can insert your input auto_complete 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 

ui_form_for(@user) do |f|
  ...
  f.input :email, append: ui_glyph("envelope"), as: :ui_auto_complete_field, collection: 5.times.map{|i| "test#{i}@test.com"}
  ...
end