rails 検索後にフォームの値を保持する radio_button_tag/check_box_tag/text_field_tag

実現したこと

1. radio_button_tag/check_box_tag/text_field_tagを使用し、 検索後も検索フォームの値を保持する

検索対象

questions テーブルのレコード

テーブルの関係

見た目はこんな感じ (検索後も値を保持している)

どうやったの？？

_search_fom.html.haml

= form_tag('/questions/search', method: :get) do
  .form-inline.bg-light.m-3.p-2
    - QuestionTag.tags_i18n.map do |k, v|
      .my-1.ml-1
        = check_box_tag  "seacrh_sort[]", k , check_box_judge(k) , id: "#{k}"
      .my-1.mr-2
        = label_tag "#{k}" ,"#{v}"
  .bg-light.m-3.p-2
    .form-check.form-check-inline.my-1.ml-1
      = radio_button_tag :time_sort, "DESC", ("DESC" == params[:time_sort]), class: "form-check-input"
      = label_tag :time_sort, "新着順" , for: "time_sort_DESC"
    .form-check.form-check-inline.my-1.ml-1
      = radio_button_tag :time_sort, "ASC", ("ASC" == params[:time_sort]) ,class: "form-check-input"
      = label_tag :time_sort, "古い順", for: "time_sort_ASC"
  .form-inline.bg-light.m-3.p-2
    .my-1.ml-1
      = check_box_tag "has_answers" , true ,("true" == params[:has_answers])
    .my-1.mr-2
      = label_tag "has_answers"  ,"回答有り"
    .my-1.ml-1
      = check_box_tag "no_answers" , true ,("true" == params[:no_answers])
    .my-1.mr-2
      = label_tag "no_answers"  ,"回答無し"
  .row.mx-auto
    .col-9.mt-2
      = text_field_tag :keyword, "#{params[:keyword]}" ,placeholder: "キーワード",class: 'form-control form-control-sm ',autocomplete: "off"
    .col-3.px-0.mt-2
      = button_tag( class: "btn btn-default search-btn-color") do
        %i.fas.fa-search

解説❶チェックボックス

- QuestionTag.tags_i18n.map do |k, v|
#QuestionTagテーブルのtagカラムのキーとバリューmapで繰り返し処理
  (enumとgem 'enum_help'を使用しています。)
      .my-1.ml-1
        = check_box_tag  "seacrh_sort[]", k , check_box_judge(k) , id: "#{k}"
#第一引数にname属性を指定。これでparams[:seacrh_sort]で第二引数の変数kを取り出せます。ポイントはseacrh_sort[]の[]です。params[:seacrh_sort]時のvalueが配列として引き出せるようになります。第三引数はture,falseを記述することでデフォルトでのチェックの有無を指定できます。今回はヘルパーに判定メゾットを定義しています。
      .my-1.mr-2
        = label_tag "#{k}" ,"#{v}"
#chack_box_tagのid属性と第一引数の変数kを同じにすることで関連付けができます。第二引数は表示文字です。

questions_helper.rb

module QuestionsHelper
  def check_box_judge(key)
    if params[:seacrh_sort].nil?
      return false
    elsif params[:seacrh_sort].include?(key)
      return true
#引数を変数kを代入し、もしparams[:seacrh_sort]がnilであればfalseを返し、params[:seacrh_sort]があればtrueを返します。これで繰り返し処理の中でデータの保持をすることができす。
    end
  end
end

解説❷ラジオボタン

  .bg-light.m-3.p-2
    .form-check.form-check-inline.my-1.ml-1
      = radio_button_tag "time_sort", "DESC", ("DESC" == params[:time_sort]), class: "form-check-input"
#第一引数にname属性の指定。第二引数にvalueの指定。第三引数にパラメータの値がDESCだった場合にtrueを返します。ここでデータの保持をしています。
      = label_tag "time_sort", "新着順" , for: "time_sort_DESC"
#ラベルには第二引数に表示文字。第三引数にradio_button_tagのidをforで指定することで関連付けされます。radio_button_tagではidを明示していませんが、引数の組み合わせでidが自動的に生成されています。検証ツールで見てみるとわかります。また第一引数でラベルとの関連付けをできるのですが、第一引数はラジオボタン同士の関連付けをする必要があるので、あえてforを使っています。
    .form-check.form-check-inline.my-1.ml-1
      = radio_button_tag "time_sort", "ASC", ("ASC" == params[:time_sort]) ,class: "form-check-input"
#二つ目のラジオボタンの第一引数にtime_sortを指定することで、最初のラジオボタンと関連付けされます。どちらかしか選択できないようになる。
      = label_tag "time_sort", "古い順", for: "time_sort_ASC"

解説❸チェックボタン

.form-inline.bg-light.m-3.p-2
    .my-1.ml-1
      = check_box_tag "has_answers" , true ,("true" == params[:has_answers])
#第一引数にnama属性の指定。第二引数にvalueの設定。第三引数にデフォルトのチェックを指定。 params[:has_answers]とvalueが同じ場合にチェックがつくようになります。
    .my-1.mr-2
      = label_tag "has_answers"  ,"回答有り"
#第一引数にfor属性を指定しラベルの関連付。第二引数に表示文字を指定。
    .my-1.ml-1
      = check_box_tag "no_answers" , true ,("true" == params[:no_answers])
    .my-1.mr-2
      = label_tag "no_answers"  ,"回答無し"

解説❹テキストフォーム

          .col-9.mt-2
            = text_field_tag "keyword", "#{params[:keyword]}" ,placeholder: "キーワード",class: 'form-control form-control-sm ',autocomplete: "off"
#こちらも同じですね。第一引数にname属性の指定。第二引数にparams[:keyword]を指定することで検索後も値が保持されます。