mercredi 13 juillet 2016

Change html output from ransack select

I'm using the ransack gem in one of my projects to handle searching. It gets the job done without a lot of code, but I want to change the HTML output for the select boxes and I can't seem to find a way to easily do that. The code I'm using looks like this

# index page

<%= search_form_for @search, url: search_pages_path, method: :post do |f| %>
  <%= f.condition_fields do |c| %>
    <%= render "condition_fields", f: c %>
  <% end  %>
  <%= link_to_add_fields "Add conditions", f, :condition %>
  <div class="search-row">
    <span>Sort:</span>
    <%= f.sort_fields do |s| %>
    <div class="input-group">
      <h1>Sort</h1>
      <%= s.sort_select %>
      <h1>after sort</h1>
    </div>
    <% end %>
    <%= f.submit class: 'btn btn-sm color-3' %>
  </div>
<% end %>

# condition_fields

<div class="search-row">
  <%= f.attribute_fields do |a| %>
  <div class="input-group">
    <label class="select">
      <%= a.attribute_select associations: [:category] %>
    </label>
  </div>
  <% end %>
  <div class="input-group">
    <label class="select">
      <%= f.predicate_select compounds: false, only: %i(cont not_cont eq not_eq blank null) %>
    </label>
  </div>
  <%= f.value_fields do |v| %>
    <div class="input-group">
      <%= v.text_field :value, class: "input" %>
    </div>
  <% end %>
  <div class="action-group">
    <%= link_to "Remove", "#", class: "link color-1 remove_fields" %>
  </div>
</div>

I've looked at the source code for the ransack FormBuilder class and it looks like most everything is coming through the search_fields method which seems to create a custom template from the inherited FormBuilder class.

Basically, I want the output from the method calls to change from something like this:

<select name="q[c][0][a][0][name]" id="q_c_0_a_0_name">
  <option value="bloggerTier">Blogger Tier</option>
  <option value="category_name">Primary Category</option>
  ...
</select>

To something like this:

<ul name="q[c][0][a][0][name]" id="q_c_0_a_0_name">
  <li value="bloggerTier">Blogger Tier</li>
  <li value="category_name">Primary Category</li>
  ...
</ul>

But I'm not sure how feasible that is without messing with the gem source code like is done in this other related article or if there's a simpler way that I'm missing.

Aucun commentaire:

Enregistrer un commentaire