【Rails】検索機能　検索実行後のフォームの値保持・消去方法

2021.12.042021.08.20

検索実行後のフォームの値の保持、消去方法についてご紹介します。

ransack使用の場合

ransackの導入についてはこちらを参照ください。

この方法だと、以下の通り、検索実行後に値は保持されたままになります。

検索後に入力値を消すためには、controllerの最終行に一行追加するだけです。

  def index
    @q = Customer.ransack(params[:q])
    @customers = @q.result(distinct: true).order(number: :asc)
    @q = Customer.ransack
  end

最後の一行追加により、検索後にクリアされる。

これで、検索後にフォームから値が消えるようになりました！

ransackを使用しない場合

次にransackを使用しない場合について

まず、検索機能のコードは以下で実装しています。

controller

  def index
    @products = Product.all
    @products = Product.search_product(params[:search]) if params[:search].present?
  end

view

<%= form_with url: homes_path, method: :get, local: true do |s| %>
  <%= s.text_field :search, placeholder: 'プロダクト名で検索' %>
  <%= s.submit '検索', name: nil %>
<% end %>

model

scope :search_product, ->(search) { where("name LIKE ?", "%#{search}%") }

上記のコードでの検索挙動はこちら

検索実行後に、フォームから値が消えている。

この値を保持する方法をご紹介します。

編集するのはviewファイルのみ

<%= form_with url: homes_path, method: :get, local: true do |s| %>
  <%= s.text_field :search, placeholder: 'プロダクト名で検索', value: params[:search] %>
  <%= s.submit '検索', name: nil %>
<% end %>

text_fieldに、「value: params[:search]」を追加

これで、値は保持されたままに！

値が保持されたままになったので、今度は検索後のクリアボタンが欲しくなりましたね！

それはフォームを空欄にして検索すればできるのでこれで良しとします！