【rails6】ransack을 이용한 복잡한 검색 요약

안녕하세요!
오늘은 ransack을 이용한 복잡한 검색 방법에 대해 정리할 것입니다.

우선은 완성형에서 보자!



하는 일은
- 양식에 입력된 키워드와 상품명으로 모호하게 검색
- 결과 상품을 일람 표시시키고 있다(이번에는 하나밖에 없다)
이상입니다!
이번에는 간단한 검색 기능을 구현합시다.

환경

Ruby 2.6.5

rails 6.0.0

DB: MySQL

참고 자료

다른 다양한 인터넷에서 "rails ransack 사용법"을 검색하여 나오는 기사는 많이 보았습니다.

① gem 설치

우선 ransack을 도입하겠습니다.

gem 'ransack'

→ ターミナルに移り
% bundle install

초기 설정은 이제 OK입니다.

② 어느 컨트롤러에 기술할지 결정한다

경우에 따라서는 한정된 페이지에서의 이용도 상정되므로,
「어느 장면에서 사용할 것인가」 「역으로 검색 폼이 등장하지 않는 장면은 언젠가」
미리 묶어 둡시다.

내 앱은 거의 모든 페이지에 검색 양식이 등장하므로 "application_controller.rb"를 사용합니다.
※ 편리합니다만, 역시 사용해야 할 부분은 가능한 한 한정하는 것이 좋다고 생각합니다

다음과 같이 설명하십시오.

application_controller.rb

before_action :set_search

private
def set_search
  @q = Item.ransack(params[:q])
  @items = @q.result(distinct: true)
end

이곳에서

params[:q]

에 대해서는, 이 「 :q 」는 디폴트의 키명이므로, 지금은 변경하지 않도록 해 주세요

또한,

(distinct: true)

이 기술을 하는 것으로, result의 중복이 없도록 정돈해 줍니다.
필요가 없는 경우는 이 기술은 삭제해 주세요.

③루트 설정(필요한 사람만)

다음은 루트의 기술을 해 나갑니다.
다른 페이지에 검색결과를 표시하고 싶습니다! 라는 방향의 순서입니다.
불필요한 분은 날려주세요.

아래와 같이 쓰자.

routes.rb

get 'items/search'

이제 경로를 확인하면 "items_search_path"로 설정되었습니다.

앞으로 이 items_search_path 를 사용해 갑니다.
copipe 때 실수하지 않도록주의하십시오

④ 검색 양식 작성

이제 검색 양식을 작성합시다.
아래는 나의 예로 참조하십시오.

_header.html.erb

<%= search_form_for @q, url: items_search_path, class:"search-form" do |f| %>
  <%= f.search_field :name_cont, placeholder: 'キーワードから探す', class:'input-box' %>
  <%= f.button type: "submit", class:"search-button" do%>
    <%= image_tag "search.png", class:"search-icon" %>
  <% end %>
<% end %>

분해하겠습니다

<%= search_form_for @q, url: items_search_path, class:"search-form" do |f| %>

search_form_for 는 ransack의 양식 생성 태그입니다. HTML의 form_with와 같습니다.
@q는 컨트롤러에서 생성한 변수입니다. 이번에는 items 테이블에 대한 검색을 해 나갈 것입니다.
url은 검색 결과를 표시하는 경로를 설명합니다. 자유롭게 설정하십시오.

<%= f.search_field :name_cont, placeholder: 'キーワードから探す', class:'input-box' %>

다음 줄이지만,
serch_field도 ransack 스트림을 작성하는 방법이므로 기억하십시오.
:name_cont는 "items 테이블의 name 열을 모호하게 검색하십시오"라는 의미입니다.
_cont는 매처라는 객체이며, 이것은 모호한 검색을 의미합니다.
(참고: _eq로 하면 완전 일치가 됩니다.)

그 밖에도 많이 있으므로, 아래를 참고로 최적인 것을 선택해 주세요

여기서 검색 키워드 제출
까지는 완성했습니다.

검색 결과를 표시하기 위해서, 「search.html.erb 」를 작성해, 「@items 」를 표시하는 기술을 해 봅시다.

⑤ 검색 결과 표시

아래는 정말 참고 정도로 봐 주세요

search.html.erb

<%= render "shared/header" %>
<div class='main'>
  <%# 商品一覧 %>
  <div class='item-contents'>
    <div class="item-container">
      <ul class='item-lists'>
        <% if @q.name_cont != nil %>
          <h3 class="subtitle"><%= "#{@q.name_cont} の検索結果" %></h3>
        <% else %>
          <h3 class="subtitle"><%= "検索結果" %></h3>
        <% end %>
        <%= render partial:"item", collection: @items, locals: {item: @item} %>
      </ul>
    </div>
  </div>
  <%# /商品一覧 %>
</div>
<%= render "shared/footer" %>

이것으로 동영상과 같은 간단한 ransack 검색 기능의 구현이 완료됩니다.
다음 번에는 복잡한 검색에 대해 씁니다.
다시 읽어주세요! !