Newer
Older
dmpopidor / app / views / branded / shared / _accessible_combobox.html.erb
<% if !models.nil? %>
  <% required = required ||= false %>
  <% classes = classes ||= '' %>
  <% title = tooltip ||= '' %>
  <% error = error ||= _('Please select an item from the list.') %>

  <% json = {} %>
  <% models.map{|m| json["#{m[attribute]}"] = m.id} %>
  <!-- If the incoming name has a namespace prefix, remove it so that the controller can access the params -->
  <% name = name.gsub(name.match(/^.*\[/)[0].split('_')[0] + '_', '') %>
  <em class="sr-only"><%= title %></em>
  <input type="text" name="<%= name %>" id="<%= id %>" 
         class="js-combobox form-control <%= classes %>" list="<%= id %>_list" 
         placeholder="<%= _('Begin typing to see a filtered list') %>"
         data-combobox-prefix-class="combobox"
         data-combobox-case-sensitive="no"
         data-combobox-limit-number-suggestions="10"
         data-combobox-see-more-text="Please refine your search ..."
         data-combobox-search-option="containing"
         data-combobox-allow-suggestion-on-empty="true"
         data-toggle="<%= title == '' ? '' : 'tooltip' %>"
         <% if defined?(placement) %>
           data-placement="<%= placement %>"
         <% end %>
         title="<%= title %>"
         aria-label= "<%= title %>",
         value="<%= default_selection[attribute] unless default_selection.nil? %>" />
  <datalist id="<%= id %>_list">
    <% models.each do |model| %>
      <option value="<%= model[attribute] %>"></option>
    <% end %>
  </datalist>

  <!-- Complete content of combobox -->
  <input type="hidden" id="<%= id %>_crosswalk" value="<%= escape_javascript JSON.generate(json) %>" />

  <!-- The JQuery accessible combobox doesn't allow for an id to be present in the value attribute -->
  <!-- so we use this hidden input to store the selected id -->
  <!-- the selected id is found after the combobox loses focus by finding the selected item in the crosswalk json -->
  <input type="hidden" id="<%= id.gsub("_#{attribute}", "_id") %>" name="<%= name.gsub("_#{attribute}]", "_id]") %>"
         value="<%= default_selection.id unless default_selection.nil? %>" aria-required="<%= required %>"
         class="org-id selected-org" data-validation="js-combobox" data-validation-error="<%= error %>" />

<% else %>
  <span id="<%= id %>_no_items"><%= _('No items available.') %></span>
<% end %>