🙄

固定ヘッダーに検索機能をつける

2022/04/06に公開約2,000字

gem 'ransack'はインストール済み

特定のviewではなく、固定ヘッダーに検索をつけたいのでapplication_controller.rbにメソッドを書く

application_controller.rb
before_action :set_search

def set_search
  @search = Post.ransack(params[:q])
  @search_posts = @search.result.includes(:author, :terms).order(created_at: :desc).page(params[:page])
end
application.html.erb
<%= search_form_for @search, url: search_index_path, method: :get, local: true do |f| %>
  <%= f.text_field :title_or_content_cont, placeholder: "気になるワードを入力" %>
  <%= f.submit "検索" %>
<% end %>

スタンダードにやるとこんな感じ

修正したところ

フォームから遷移するURLが長くなるので見やすくしたい
search?title_or_content_cont=○○&commit=検索
上記の方法で実装するとこのような長いURLが生成されてしまう
今回はsearch?q=○○のような短いURLが生成されるように変更してみた

調べてみたところ、search_form_forを使っていると長いURLが生成されてしまう…?
→form_withに書き換えてみる

application.html.erb
<%= form_with url: search_index_path, method: :get, local: true do |f| %>
<%= f.text_field :q, placeholder: "気になるワードを入力" %>

text_field :qとし、qをgetで渡す
ちなみにform_withの引数で指定しているURLは遷移先のURL<

application_controller.rb
@query = { title_or_content_cont: params[:q] }
@search = Post.ransack(@query)
@search_posts = @search.result.order(created_at: :desc).page(params[:page])

title_or_content_contをキーにしたハッシュとしてparams[:q]を渡し、それを@queryに入れてransackに渡している
commit=検索の部分はf.submitのオプションとしてname: nilを追加すれば消える

検索結果ページに遷移後もフォームに検索ワードが残るのを避けたい
f.text_fieldのオプションとしてvalue: ""を追加すれば検索ワードが残らない

完成形

application_controller.rb
before_action :set_search

def set_search
  @query = { title_or_content_cont: params[:q] }
  @search = Post.ransack(@query)
  @search_posts = @search.result.order(created_at: :desc).page(params[:page])
end
application.html.erb
<%= form_with url: search_index_path, method: :get, local: true do |f| %>
  <%= f.text_field :q, placeholder: "気になるワードを入力", value: "" %>
  <%= f.submit "検索", name: nil %>
<% end %>

参考

https://qiita.com/fujitora/items/b2134bf6abcfda79c47f

https://rochefort.hatenablog.com/entry/2016/11/02/070000

https://kamihikouki.hatenablog.com/entry/2013/01/14/191327

Discussion

ログインするとコメントできます