Расширенный поиск с Ransack

 $('.close-advanced-search').click ->
    $('.advanced-search').hide()
    $('.show-advanced-search').show()

Шаг 4 — 2: Добавление диапазона цен

Время добавить диапазон цен в форму поиска. Мы будем использовать тот же метод search_form_for@search

В приведенном ниже коде символы :price_gteqprice_lteqцену, которая больше или равна, и цену, меньшую или равную соответственно. Посмотреть список доступных предикатов здесь

 <h4>Advanced Search</h4>
<%= search_form_for @search do |f| %>
  <div class="large-5 small-4 columns">
    <%= f.label :price_gteq, class: "movie-label" %>
    <%= f.text_field :price_gteq, class: "radius", placeholder: "Minumum Price" %>
  </div>
  <h6 class="large-2 small-4 columns center"><span>And</span></h6>
  <div class="large-5 small-4 columns">
    <%= f.label :price_lteq, class: "movie-label" %>
    <%= f.text_field :price_lteq, class: "radius", placeholder: "Maximum Price" %>
  </div>
  <div class="column">
    <%= f.submit "Search", class: " radius button" %>
  </div>
<% end %>

Шаг 5: Добавить сортировку

Ransack имеет конструктор форм, который предоставляет ссылки для сортировки столбцов в порядке возрастания или убывания. Этот строитель является sort_link Его очень просто использовать, просто передайте объект поиска и имя столбца (атрибут), который вы хотите отсортировать, и заполнитель для него.

Я переопределил три метки Foundation в файле foundation_and_overrides.scss .

 <h4 class="column">Featured Movies</h4>
<div class="row right padm">
  <div class="column">
    <div class="filter-label red">
      <%= sort_link @search, :title, "Title" %>
    </div>
    <div class="filter-label dark-golden-rod">
      <%= sort_link @search, :price, "Price" %>
    </div>
    <div class="filter-label dark-slate-gray">
      <%= sort_link @search, :release_year, "Release Year" %>
    </div>
  </div>
</div>

Шаг 6: Добавить условный поиск

На этом шаге давайте рассмотрим, как добавить условные поля поиска. Сделайте блок выбора со всеми атрибутами фильма, а другой — со всеми предикатами. Окончательным вводом будет текстовое поле для значения, которое будет использоваться при поиске. Ransack имеет несколько конструкторов форм для этого сценария, как показано в приведенном ниже коде.

Ради интереса я добавил некоторые функции сортировки, но в форме выбора. Один раскрывающийся список предназначен для атрибутов модели, а другой — для порядка (по возрастанию или по убыванию):

 <h4>Advanced Search</h4>
<%= search_form_for @search do |f| %>
  <%= f.condition_fields do |c| %>
    <div class="large-4 small-4 columns">
      <%= c.attribute_fields do |a| %>
        <%= a.attribute_select nil, class: "radius" %>
      <% end %>
    </div>
    <div class="large-4 small-4 columns">
      <%= c.predicate_select Hash.new, class: "radius" %>
    </div>
    <div class="large-4 small-4 columns">
      <%= c.value_fields do |v| %>
        <%= v.text_field :value, class: "radius" %>
      <% end %>
    </div>
  <% end %>
  <h5>Sort</h5>
  <div class="column">
  <%= f.sort_fields do |s| %>
    <%= s.sort_select Hash.new, class: "large-5 small-4 columns mrs radius" %>
  <% end %>
  </div>
  <%= f.submit "Search", class: "radius button" %>
<% end %>

Шаг 7: Рефакторинг поиска

Хорошей идеей будет переместить наш код в часть с именем condition_fields :

_condition_fields.html.erb

 <div class="field">
  <div class="large-4 small-4 columns">
    <%= f.attribute_fields do |a| %>
      <%= a.attribute_select nil, class: "radius" %>
    <% end %>
  </div>
  <div class="large-4 small-4 columns">
    <%= f.predicate_select Hash.new, class: "radius" %>
  </div>
  <div class="large-4 small-4 columns">
    <%= f.value_fields do |v| %>
      <%= v.text_field :value, class: "radius" %>
    <% end %>
    <%= link_to "remove", "#", class: "remove_fields" %>
  </div>
</div>

Шаг 8: Ссылка для добавления критериев

Давайте добавим ссылку в поле расширенного поиска, чтобы добавить условия. В index.html.erb добавьте ссылку для добавления критериев, например:

 <%= f.condition_fields do |c| %>
  <%= render "condition_fields", f: c %>
<% end %>
<p><%= link_to_add_fields "Add Conditions", f, :condition %></p>

Сначала создайте вспомогательный метод link_to_add_fields

 def link_to_add_fields(name, f, type)
  new_object = f.object.send "build_#{type}"
  id = "new_#{type}"
  fields = f.send("#{type}_fields", new_object, child_index: id) do |builder|
    render(type.to_s + "_fields", f: builder)
  end
  link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
end

В movies.js.coffee обработайте событие clickadd_fields

 $('form').on 'click', '.add_fields', (event) ->
  time = new Date().getTime()
  regexp = new RegExp($(this).data('id'), 'g')
  $(this).before($(this).data('fields').replace(regexp, time))
  event.preventDefault()

Шаг 9: Ссылка для удаления критериев

Целесообразно также добавить ссылку для удаления условий. Добавьте его в частичку condition_fields , сопровождая каждое условие:

 <div class="large-4 small-4 columns">
  <%= f.value_fields do |v| %>
    <%= v.text_field :value, class: "radius" %>
  <% end %>
  <%= link_to "", "#", class: "remove_fields fi-x" %>
</div>

Вернитесь в movies.js.coffee , необходимый обработчик события click

 $('form').on 'click', '.remove_fields', (event) ->
  $(this).closest('.field').remove()
  event.preventDefault()

Шаг 10: отправить запрос

Если мы добавим слишком много условий, число параметров может достичь предела, разрешенного запросами GET. Этого можно избежать, используя вместо этого POST.

В файле config / rout.rb добавьте:

 resources :movies, only: [:show, :index] do
  match :search, to: 'movies#index', via: :post, on: :collection
end

Затем в index.html.erb измените форму поиска, чтобы использовать новый путь поиска, например:

 <%= search_form_for @search, url: search_movies_path, method: :post do |f| %>

Резюме

В этом руководстве мы использовали то же самое приложение онлайн-магазина фильмов, которое использовалось в разделе « Создание онлайн-магазина с помощью Rails » для добавления сложных функций поиска. Благодаря использованию драгоценного камня Ransack приложение для просмотра фильмов теперь имеет приятный интерфейс для простого и сложного поиска.