durch Seite von Dropdown-Filter

Question

Dropdown

Ich bin einige Wochen in den Lernschienen, reagieren und js Filtern. Ich entschuldige mich im Voraus, wenn meine Frage oder Antwort wirklich einfach ist. Ich möchte die Seite mithilfe der Dropdown-Filterleiste filtern. Ich habe das Bild zur Verfügung gestellt. Ich habe meinen Code unten zur Verfügung gestellt. Dieser Code ist in Schienen App. Danke im Voraus!

<div class="row data-query"> 
<div class="col-xs-3 filterby">Filter By</div> 
    <div class="col-xs-3 filter"> 
    <ul class="filter-dropdown pull-left"> 
     <li class="dropdown" value="all"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Condition <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu" id="FilterContainer"> 
      <li><a href="#">Like New</a></li> 
      <li><a href="#">Good Condition</a></li> 
      <li><a href="#">Fair Condition</a></li> 
      <li class="divider"></li> 
      <li class="divider"></li> 
      <li><%= link_to "", toys_path %></li> 

     </ul> 
     </li> 
    </ul> 
    </div> 
    <div class="col-xs-3 filter"> 
    <ul class="filter-dropdown pull-left"> 
     <li class="dropdown" value="all"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Age Group <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu" id="FilterContainer"> 
      <li><a href="#">0-1yr</a></li> 
      <li><a href="#">1-2yrs</a></li> 
      <li><a href="#">2-4yrs</a></li> 
      <li><a href="#">4-8yrs</a></li> 
      <li><%= link_to "", toys_path %></li> 
     </ul> 
     </li> 
    </ul> 
</div> 
    <div class="col-xs-3 filter"> 
    <ul class="filter-dropdown pull-left"> 
     <li class="dropdown" value="all"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Category <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu" id="FilterContainer"> 
      <li><a href="#">Activity & Learning</a></li> 
      <li><a href="#">Arts & Crafts</a></li> 
      <li><a href="#">Baby Toys</a></li> 
      <li><a href="#">Dolls</a></li> 
      <li><%= link_to "", toys_path %></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 
$('select').change(function() { 
var current = this.value; 

if (current == 'all') { 
    $('#FilterContainer').find('li.all').show(); 
} else { 

    $('#FilterContainer').find('li').hide(); 
    $('#FilterContainer').find('li.all.' + current).show(); 
} 

return false; 

});

Answer 1

Diese Art der Suche ist in Rails mit Hilfe der Ransack-Juwel einfach zu tun. https://github.com/activerecord-hackery/ransack

Ihrer Ansicht nach werden Sie etwas davon haben, je nach Modell:

<%= search_form_for @search do |f| %> 
    <div> 
     <%= f.label :condition %> 
     <%= f.collection_select :condition, Condition.all, :id, :name, {include_blank: "All Conditions"} %> 
    </div> 
    <div> 
     <%= f.submit "Search" %> 
    </div> 
<% end %>