ransackを使った検索結果を表示する

ransackとは

シンプルな検索機能から複雑な検索機能まで幅広く使える検索に特化したgem

<%= search_form_for @p, url: "検索結果を表示したいパス" do |f| %>
  <%= f.label :"カラム名", '表示される文字' %>
  <%= f.collection_select :"カラム名", "配列のデータ", :"参照してくるDBのカラム名", :"表示されるカラム名", "オプション設定" %>
  <br>
  <%= f.submit '検索' %>
<% end %>

こちらが検索機能の形となっています。
search_form_forを使うことでransack特有の検索フォームを生成できます。

下準備

gemfile

gem 'ransack'

ターミナル

bundle install

表現したかったこと

1:編集するというボタンを押すと、どのアイテムを編集するか？という検索ページへ飛ぶ
2:検索結果にマッチしたものを表示するページへ遷移
3:編集したいアイテム（画像）をクリックするとそのアイテムの編集ページへ遷移

実践

1:ルーティングの設定

config/routes

resources :posts do
  collection do
     get 'search_edit' #どのアイテムを編集するかの検索ページへ
     get 'search_edit_result' #検索結果へのページへ
  end
end

seach_editとsearch_edit_resultというルーティングを新しく定義します。
（私の場合は、可読性の考慮と詳細設定、削除設定も同じ流れにしたかったので、このような名前で定義してます）

2.コントローラーへ定義

postscontroller

before_action :search_post, only: [:search_edit, :search_edit_result]

  def edit
    @post = Post.find(params[:id])
  end

  def update
    @post = Post.find(params[:id])
    if @post.update(post_params)
      redirect_to root_path
    else
      render :edit
    end
  end

  def search_edit
    @post = Post.find_by_id(params[:id])
  end

  def search_edit_result
    @post = Post.find_by_id(params[:id])
    @results = @p.result
  end

private

  def post_params
    #省略
  end

  def search_post
    @p = Post.ransack(params[:q])
  end

この後作るビューで検索機能を入れます。
その検索結果を@pとして変数にして渡しています。
:qとは、検索する際に入力した内容である検索パラメータのキーです

3.ビューを作成

# 省略
<%= link_to 'スタイルを編集', search_edit_posts_path %>
# 省略

まずはこれで
1:編集するというボタンを押すと、どのアイテムを編集するか？という検索ページへ飛ぶ
を実行できます。

検索ページ

# 省略
<%= search_form_for @p, url: search_edit_result_posts_path do |f| %>
# 条件を入力
  <%= f.submit '検索' %>
<% end %>
# 省略

こちらで条件を検索します。
url: search_edit_result_posts_pathとすることで、検索結果のページへ遷移することができます。
よって、
2:検索結果にマッチしたものを表示するページへ遷移
を実行できます。

検索結果ページ

# 省略
<% @results.each do |result| %>
  <%= link_to edit_post_path(result) do %>
  <%= image_tag result.image.variant(resize: '100x100') %>
   <% end%>
 <% end %>
# 省略

これで検索の結果が出力されます。

<%= image_tag result.image.variant(resize: '100x100') %>
こちらは投稿の時に画像を投稿していた場合は、その画像が出力されます。
（ここでは例として、画像の大きさを100x100にしていますが大きさはお好みで）

edit_post_path(result)と指定することで、その画像をクリックすると編集画面へ遷移できるようになります。

これで
3:編集したいアイテム（画像）をクリックするとそのアイテムの編集ページへ遷移
が実行できます。

終わりに

今回は編集画面への遷移までの流れでしたが、これに詳細、削除の機能を落とし込もうとすると、単純にルーティングとコントローラーの記載が３倍になってしまいます。
もう少し上手くまとめられないか模索中です。