Combobox Field(ui_combobox_field)

UiBibz::Ui::Core::Forms::Texts::ComboboxField

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

 # or by block 
 ui_combobox_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)
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.

# app/views/maps/form.erb
= ui_combobox_field 'example1', url: "/maps/search"

# app/controllers/maps_controller.rb
def search
  results = 5.times.map { |a| "Option #\{a}" }.select{ |e| e.match(/#\{params[:query]}/i) }
  respond_to do |format|
    format.html { render partial: 'maps/combobox_results', locals: { autocomplete_results: results } }
  end
end

# app/view/maps/_combobox_results.erb
<%= turbo_frame_tag "example1-combobox-list" do %>
  <ul class="search-results">
    <%- autocomplete_results.each do |address| %>
      <li data-action="click->combobox#insertValue"><%= address.address %></li>
    <% end %>
  </ul>
<% end %>

# app/assets/stylesheets/combobox.sass
.search-results
  border: 1px solid $border-color
  border-top: 0px
  background-color: $light
  list-style-type: none
  padding: 0px

  > li
    width: 100%
    padding: 10px
    &:odd
      background-color: $dark
    &:hover
      cursor: pointer
      background-color: $primary-link

<div data-controller="combobox" data-combobox-url-value="/maps/search" class="combobox">
  <input type="text" name="example1" id="example1" data-action="keyup->combobox#search" class="form-control combobox-field" autocomplete="false">
  <div class="combobox-list">
    <turbo-frame id="example1-combobox-list" src="http://localhost:3000/components/forms/texts/combobox-list?query=op" complete="">
      <ul class="search-results">
        <li data-action="click->combobox#insertValue">Option 0</li>
        <li data-action="click->combobox#insertValue">Option 1</li>
        <li data-action="click->combobox#insertValue">Option 2</li>
        <li data-action="click->combobox#insertValue">Option 3</li>
        <li data-action="click->combobox#insertValue">Option 4</li>
      </ul>
    </turbo-frame>
  </div>
</div>

Combobox Field surrounded

Ruby
Html

# app/views/maps/form.erb
ui_combobox_field 'example2', url: "/maps/search", debounce: 200, append: ui_glyph('pencil-alt'), prepend: ui_glyph('camera-retro')

# app/controllers/maps_controller.rb
def search
  respond_to do |format|
    format.html { render partial: 'maps/combobox_results', locals: { autocomplete_results: ["Option 1", "Option 2"] } }
  end
end

# app/view/maps/_combobox_results.erb
<%= turbo_frame_tag "example2-combobox-list" do %>
  <ul class="search-results">
    <%- autocomplete_results.each do |address| %>
      <li data-action="click->combobox#insertValue"><%= address.address %></li>
    <% end %>
  </ul>
<% end %>

# app/assets/stylesheets/combobox.sass
.search-results
  border: 1px solid $border-color
  border-top: 0px
  background-color: $light
  list-style-type: none
  padding: 0px

  > li
    width: 100%
    padding: 10px
    &:odd
      background-color: $dark
    &:hover
      cursor: pointer
      background-color: $primary-link

<div data-controller="combobox" data-combobox-url-value="/maps/search" data-combobox-debounce-value="200" class="combobox">
  <input type="text" name="example2" id="example1" data-action="keyup->combobox#search" class="form-control combobox-field" autocomplete="false">
  <div class="combobox-list">
    <turbo-frame id="example2-combobox-list" src="/maps/search?query=op" complete="">
      <ul class="search-results">
        <li data-action="click->combobox#insertValue">Option 0</li>
        <li data-action="click->combobox#insertValue">Option 1</li>
        <li data-action="click->combobox#insertValue">Option 2</li>
        <li data-action="click->combobox#insertValue">Option 3</li>
        <li data-action="click->combobox#insertValue">Option 4</li>
      </ul>
    </turbo-frame>
  </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_combobox_field. You can use Simple Form input options and Ui Bibz ui_combobox_field options.

Then in your view, you can insert your input combobox field. This simple form component is based on simple_form

Ruby

ui_form_for(@user) do |f|
  ...
  f.input :email, append: ui_glyph("envelope"), as: :ui_combobox_field, url: "/maps/search"
  ...
end