검색 조건 개요

프리마 앱에서 Gem ransack을 사용하여 여러 열에서 검색하는 방법으로 구현했습니다.

상품의 타이틀이나, 본문의 어느 쪽인가에 키워드가 있으면서 지정한 조건에 들어맞으면 있으면 상품이 히트합니다.
검색창의 보기는 다음과 같습니다.



덧붙여서 테이블은 다음과 같이 되어 있습니다.



카테고리 　　… genre
상품 상태 　　… status
우송료 부담　　　…
발송까지의 일수　…　day
가격　　　　　… price

입니다. 「카테고리」, 「상품 상태」, 「송료 부담」, 「발송까지의 일수」는 ActiveHash를 이용해, 테이블에는 id만 보존하고 있습니다.
상기의 항목＋키워드(상품의 타이틀인가, 텍스트의 내용) 모두에 히트한 것을 짜낸다고 하는 검색을 실행하고 싶습니다.

컨트롤러 설명

item_controller

class ItemsController < ApplicationController
  # index,show,searchページに検索窓のヘッダーを設置しているため、そのアクションの時に実行
  before_action :search_product, only: [:index, :show, :search]

  #省略

  private

　def search_product
    @p = Item.ransack(params[:q])  # 検索オブジェクトを生成
    @results = @p.result
  end
end

(params[:q])의 :q는 검색 매개변수의 기본 매개변수 키입니다.
다음은 동의어이지만 이미 다른 위치에서 search를 정의한 경우 기본 ransack 메서드를 사용할 수 있습니다.Item.ransack(params[:q])Item.search(params[:q])@p = Item.ransack(params[:q]) 여기서 검색 객체를 생성한 후,@results = @p.result 에서 검색 결과를 @results에 넣습니다.

검색 막대 설명

검색 보기

# @pに検索の情報を入れて、コントローラーに渡します。
<%= search_form_for @p, url: search_items_path do |f| %>
  <div class = 'nav-up'>
# :title_or_text_contは、text_fieldに入力した文字がtitleかtextの中に含まれているか、という記述
    <%= f.text_field :title_or_text_cont, placeholder: "キーワードから探す", class: "input-box" %>
    <button class="search-button">
      <%= image_tag("search.png", class:"search-icon")  %>
    </button>
  </div>
  <div class='nav-down'>
    <div class='label-select'>
      <%= f.label :genre_id_eq, 'カテゴリー', class: 'label' %>
      <%= f.collection_select :genre_id_eq, Genre.where.not(id: 0), :id, :name,  include_blank: '指定なし', class: 'search-select' %>
    </div>
    <div class='label-select'>
      <%= f.label :status_id_eq, '商品の状態', class: 'label' %>
      <%= f.collection_select :status_id_eq, Status.where.not(id: 0), :id, :name,  include_blank: '指定なし', class: 'search-select' %>
    </div>
    <div class='label-select'>
      <%= f.label :bear_id_eq, '送料負担', class: 'label' %>
      <%= f.collection_select :bear_id_eq, Bear.where.not(id: 0), :id, :name,  include_blank: '指定なし', class: 'search-select' %>
    </div>
    <div class='label-select'>
      <%= f.label :day_id_eq, '発送までの日数', class: 'label' %>
      <%= f.collection_select :day_id_eq, Day.where.not(id: 0), :id, :name,  include_blank: '指定なし', class: 'search-select' %>
    </div>
    <div class='label-select'>
      <%= f.label :price, '価格', class: 'label' %>
      <%= f.radio_button :price_lteq, '' %>
      指定なし
      <%= f.radio_button :price_lteq, '1000' %>
      1000円以下
      <%= f.radio_button :price_lteq, '2500' %>
      2500円以下
      <%= f.radio_button :price_lteq, '5000' %>
      5000円以下
      <br>
    </div>
  </div>
<% end %>

검색 결과를 표시하는 보기

search.html.erb

<% if @results.present? %>
  <ul class='item-lists'>
    <% @results.each do |item| %>
      <%= render partial: "shared/item", locals: {item: item} %>
    <% end %>
  </ul>
<% else %>
  <div>
    <p>一致する商品がありません。条件を変えて検索してみよう！</p>
  </div>
  <ul class='item-lists'>
    <% Item.all.each do |item| %>
      <%= render partial: "shared/item", locals: {item: item} %>
    <% end %>
  </ul>
<% end %>

이상으로 검색 결과에 있던 상품을 좁힐 수 있습니다.
자세한 해설은 나중에 하려고 합니다.