キーワード検索とタグ検索を切り替えたい！

実装した検索機能

• キーワード検索
• タグ検索

前提

Rails 4.2
ルーティング

search_products GET    /products/search(.:format)  products#search
                POST   /products/search(.:format)  products#search

キーワード検索について

こんな感じ。

タグ検索について

使用したgemについて

Ransack 1.8.8

Ransackが便利だという話

Ransackを用いるまでは、以下のようにWhereメソッドやLIKEなどを使ってキーワード検索を実装していました。

product.rb

  def self.search(keyword)
    if keyword
      Product.where(['name LIKE?', "%#{keyword}%"])
    else
      Product.all
    end
  end

ですが、Ransackというgemを使うと、一文書いただけで実装できました。

gem 'ransack'

product_controller.rb

  def search
    # キーワード検索
    @search = Product.ransack(params[:q])
    @results = @search.result.order("created_at DESC").page(params[:page]).per(10)

    # タグ検索
    @tag_search = Product.tagged_with(params[:search])
  end

ransackというメソッドとパラメータの指定で、キーワード検索による結果を返してくれているみたいです。
http://nekorails.hatenablog.com/entry/2017/05/31/173925
↑かなりお世話になったサイト。

タグ検索においても、tagged_withというメソッド+検索タグを引数にとると、うまく対象のタグのついたツイートを取得できます。

search.html.erb

<div class="container">
  <div class="row">
    <div class="col s12">
      <ul class="tabs">
 　　　　　　　　　　<!--materialize.cssを用いてキーワード検索とタグ検索を切り替え-->
        <li class="tab col s6"><a href="#test1">キーワード検索</a></li>
        <li class="tab col s6"><a href="#test2">タグ検索</a></li>
      </ul>
      <!--キーワード検索-->
      <div id ="test1" >
 　　　　　　　　　　　<!--Ransackを使うとsearch_form_forを使える！-->
        <%= search_form_for @search,url: search_products_path do |f| %>

          <div class="form-group">
            <i class="material-icons prefix">search</i>
            <%= f.search_field :name_cont, class: 'form-control', placeholder: 'キーワードで検索' %>
            <%= f.submit 'Search',:class=> "btn waves-effect waves-light" %>
          </div>
        <% end %>
      <!--キーワード検索の結果を表示-->
        <div class="col s6">
          <div class="card" id = "test1">
            <div class="blue-grey darken-1">
              <ul class="card">
                <% @results.each do |result| %>
                  <%= render 'products/product' , a_product: result %>
                  </ul>
                  <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>

    <!--タグ検索-->
      <div id ="test2">
        <div class="form-group">
        <i class="material-icons prefix">search</i>
        <!--タグはform_tagを用いて-->
        <%= form_tag({action: 'search', method: "get"}) do %>
          <%= text_field_tag :search %>
          <%= submit_tag 'Search', :class =>  "btn waves-effect waves-light" %>
        <% end %>
        </div>
　　　　　　　　　　　　　　　<!--タグ検索の結果を表示-->
        <div class="col s6">
          <div class="card" id = "test1">
            <div class="blue-grey darken-1">
              <ul class="card">
                <% @tag_search.each do |result| %>
                  <%= render 'products/product' , a_product: result %>
                  </ul>
                <% end %>
           </div>
          </div>
        </div>
      　　</div>
     </div>
    </div>
  </div>
</div>

Ransackによってsearch_form_for+@search(params[:q]<=キーワードが入るパラメータを含むインスタンス)を使用できます。form_forに概念的には近い。

タグ検索では、form_tagを用いた。こちらはタグ名を含んでくれたら十分。(わざわざ新しいインスタンスを準備してform_forで投げなくても良いかな・・・)[独り言]

終わりに

form_forの引数のインスタンスや、findやwhereなどメソッドで取得した時の型への理解が足りず、時間がかかってしまった。パラメーターやメソッドの勉強し直さないといけないかも。