검색 기능을 gem을 사용하여 쉽게 구현하세요!

gem 'ransack'을 이용한 검색 기능 구현

설치

Gemfile

gem 'ransack'

설치하자.

터미널

$ bundle install

검색 기능 만들기

application_controller.rb

before_action :set_search

def set_search
  @search = Product.ransack(params[:q]) #ransackの検索メソッド
  @search_products = @search.result(distinct: true).order(created_at: "DESC").includes(:user).page(params[:page]).per(5) # productsの検索結果一覧 
   # 最終的に、@search_productsを検索結果画面（例：search.html.haml）に挿入します。
   # 検索結果の一覧：  @search_products = @search.result.order(created_at: "DESC")
   # distinct: trueは検索結果のレコード重複しないようにします。
   # ページネーション:  .includes(:user).page(params[:page]).per(5
end

application_controller.rb에 정의합니다.

products_controller.rb에 쓰면 products_controller.rb를 사용하지 않는 페이지를 표시했을 때에 에러가 되기 때문에, application_controller.rb로 기술.
kaminari로 페이지 네이션을 붙이고 있기 때문에 page(params[:page])를 붙였다.
search 메소드보다 ransack 메소드 추천이므로 ransack 메소드를 사용했다.

ransack 검색 옵션

검색 방법
의미(영어)
의미


*_eq
equal
같음

*_not_eq
not equal
같지 않음

*_lt
less than
더 작은

*_lteq
less than or equal
더 작다(같은 것도 포함)

*_gt
grater than
더 큰

*_gteq
grater than or equal
더 큰 (같은 것도 포함)

*_cont
contains value
부분 일치(내용 포함)


이번에 사용한 것은 * _cont입니다.

distinct: true에 대한 참고 페이지

검색 양식 만들기

검색.html.haml

.search_wap
   = search_form_for @search do |f|
     = f.text_field :name_cont , placeholder: "何かお探しですか？", class: 'input'
       = button_tag type: 'submit', class: 'search__button' do
         .icon_wap
           %i.fas.fa-search

haml 형식으로 양식을 만들었습니다.
이 단계에서는 url:〇〇_path를 붙이지 않습니다. 나중에 부여해 갑니다.
scss의 mixin도 기재해 둡니다.

mixin_search

@mixin input{
  border: none;
  border-radius: 50px;
  background: #F4F8F9;
  height: 37px;
  width: 100%;
  padding: 10px 20px;
}

.search_wap{
  margin-right: 15px;
  position: relative; 
  .input{
    @include input;
    margin: 13px 0 0;
  }
  .search__button{
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 13px;
    height: 37px;
    width: 40px;
    border-style: none;
    border-radius: 0px 4px 4px 0px;
    padding: 0px;
    .icon_wap{
      i{
        position: absolute;
        right: 14px;
        top: 13px;
        font-size: 13px;
        font-weight: 900;
        color: #999999;
      }
    }
  }
}

검색 결과 보기 만들기

그리고는, 검색 화면을 작성해, 검색 결과인 @search_products 를 삽입해 주면 완성입니다.

검색 결과 화면으로 이동하려면 route.rb에 get :search를 추가합니다.

route.rb

Rails.application.routes.draw do
  resources :products do
    collection do
      get :search
    end
  end
end

이제 검색 양식에 URL을 추가합시다.

검색.html.haml

.search_wap
   = search_form_for @search, url: search_users_path do |f|
     = f.text_field :name_cont , placeholder: "何かお探しですか？", class: 'input'
       = button_tag type: 'submit', class: 'search__button' do
         .icon_wap
           %i.fas.fa-search

view용 html.hml과 컨트롤러를 작성합니다.

products_controller.rb

class UsersController < ApplicationController
  def search
  end
end

search.html.haml

= render 'shared/main-header'
.container-fluid
  .row.py-5.w-100
    .jscroll
      = render partial: 'user', collection: @search_products, as: "product", class: "jscroll"

// @search_productはapplication_controller.rbで定義している。

@search_product 에서 검색 결과의 Product를 표시하므로 index로 작성한 view에 @products을 @search_product로 다시 작성하면 완성됩니다.

요약

검색 처리는 아래와 같이

application_controller.rb

before_action :set_search
def set_search
  @search = Product.ransack(params[:q]) #ransackの検索処理
  @search_products = @search.result # 検索結果
end

검색 양식 만들기

검색.html.haml

.search_wap
   = search_form_for @search do |f|
     = f.text_field :name_cont , placeholder: "何かお探しですか？", class: 'input'
       = button_tag type: 'submit', class: 'search__button' do
         .icon_wap
           %i.fas.fa-search

그리고는 view에 @search_products 를 삽입하면 완성.

if 문 추가

if 문을 추가하면 다음 세 가지 패턴이 좋을 수 있습니다.

예

// 検索キーワードなし: 空白だとスペースを入れいてるname全部がヒットしてしまうため
- if params[:q]['name_cont'] == ""
  = "検索キーワードがありません。"

// 検索結果ありの場合
- elsif @search_products.present?
  = "「#{params[:q][:name_cont]}」の検索結果: #{@search_products.count}個"

// 検索数0の場合
- else
  = "検索に一致する商品はありませんでした"

그럼 실제로 써 갑시다!

여러 열에서 검색하는 방법

참고가 되는 페이지

여러 키워드를 AND로 검색

참고가 되는 페이지

참고 링크

ransack에서 Rails 앱 헤더에 검색 기능 추가
【Rails】 헤더에 검색 기능을 추가하는 방법
Rubyon Rails로 검색 기능 만들기 (ransack)
[Rails]ransack을 이용한 다양한 검색 폼 작성 방법 정리
Rails 5.1과 Bootstrap으로 만드는 간단한 검색 기능의 템플릿