11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ransackを使ったプルダウン付き検索フォーム(アドバンストモード)

Last updated at Posted at 2019-02-21

##やりたいこと
スクリーンショット 2019-02-21 16.47.14.png

これ。
画像はいわずもがなa○azonです。

いちいち全データから検索しなくてもいいよって時に、
プルダウンで範囲を絞って(カラム指定)検索できたらいいのに・・・。
そんなにこだわらなくても、よほど膨大なデータでない限り問題はないことですが、

それ以外にも
ーーーーーーーーーーーーーーーー
(例)CD商品検索

「商品1」
歌手名:さかな
CD名:にく 

「商品2」
歌手名:にく
CD名:ふぃれ
ーーーーーーーーーーーーーーーー
上記のように歌手名で検索したつもりが同名のCDがヒットしたり、
CDを探していたのに歌手名でヒットした分お目当ての検索結果が埋もれたり。

かといって、チェックボックスを追加するのもデザイン的にすっきりしない・・・。
と思ったので、公式Gitなどを眺めながら以下やり方をまとめました。

##やりかた (プルダウン付きのフォームを表示させるまで)

Gemfile.rb
gem 'ransack'

まずはransackをGemfileに追記してbundle install

検索フォームを出すcontroller.rb
def hoge
  @q = Post.ransack #試した当時はsearchメソッドでしたが恐らくransackでも動きます
  @q.build_condition if @q.conditions.empty? #これを書かないとformが表示されない
end

検索フォームを表示させるページのコントローラーに上記追記(必要に応じて以下変更要)
-hoge→フォームを表示させるアクション(indexとか)
-Post→検索するテーブル

検索結果ページのcontroller.rb
def fuga
  @result = @q.result(distinct: true) #ここで実際に検索
end

ここまでは通常のransackの使い方とほぼ同じ。
違うのはparamsで検索条件を指定しないところです。(必要に応じて以下変更要)
-fuga→検索結果を表示させるアクション

検索フォームを出す.html
<%= search_form_for @q, html: {class: 'hogehoge'} url: fuga_path do |f|%>

    <!-- ここで検索するカラムを指定-->
    <%= f.condition_fields do |c| %>
      <%= c.attribute_fields do |a| %>
        <%= a.attribute_select associations: [] %>
      <% end %>

      <!-- ここで曖昧検索(cont)を指定。これはc.hidden_field :p, value:を使って絞り込むことが可能-->
      <%= c.hidden_field :p, value: "cont" %>
      <%= c.value_fields do |v| %>
        <%= v.search_field :value, placeholder: '検索ワードを入力' %>
      <% end %>
    <% end %>
    <%= f.submit '検索' %>
<% end %>

viewに上記記載することでカラムを指定するためのプルダウンがついた検索フォームができます。(必要に応じて以下変更要)
-hogehoge→後で使うためクラス名を付与
-fuga_path検索結果ページのcontrollerfugaへのpathを記載

検索結果を出す.html
<% @result.each do |post| %>
(中略)
<%end%>

結果を表示。

##不要なカラムを非表示にする
ここまでで、この記事の最初の画像のようなフォームを作ることができました。
しかしながら・・・、
どうもこのままの記述だと、テーブル内の全カラムが表示されてしまうようです・・・。
(例)商品を登録したユーザーのID、登録した時間

いずれかの.scss
.hogehoge {
$is: 1,3,5,6;
/*$isに何番目を指定するかいれる*/

@each $i in $is {
    option:nth-of-type(#{$i}) { display: none }
/*つまり上記の場合,1,3,5,6番目のカラムを非表示にしてる*/
}
}

試行錯誤した結果、上記記述で非表示にして対応しております。
.cssには書き込めないので注意してください。
(元からある.scssファイルにかくか、拡張子を変更する)
恐らくransackでカラムの指定のやり方もあると思うのですが・・・研究中

###参考ページ
http://nekorails.hatenablog.com/entry/2017/05/31/173925
Ransackで簡単に検索フォームを作る73のレシピ

11
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?