【Rails7】ransackとStimulusでインスタント検索機能を実装する方法

gem "ransack"

class PostsController < ApplicationController
  ・・・

  def show
    # params[:q]には検索フォームで指定した検索条件が入る
    @search = @post.items.ransack(params[:q])
    # デフォルトのソートを created_at 降順にする
    @search.sorts = "created_at DESC" if @search.sorts.empty?
    # @search.result で検索結果となる@itemsを取得する
    @items = @search.result
  end

  ・・・
end

<%= search_form_for @search, url: post_path(@post) do |f| %>
  <div class="row g3 mb-3">
    <div class="col-4 col-xl-2">
      <%= f.label :item_number_start, "番号", class: "form-label fw-bold" %>
      <%= f.search_field :item_number_start, class: "form-control" %>
    </div>
    <div class="col-4 col-xl-2">
      <%= f.label :name_cont, "景品名", class: "form-label fw-bold" %>
      <%= f.search_field :name_cont, class: "form-control" %>
    </div>
    <div class="col-4 col-xl-2">
      <%= f.label :item_state_eq, "在庫", class: "form-label fw-bold" %>
      <%= f.select :item_state_eq, [['あり ◯', "exist" ], ['なし x', "taken"]], {include_blank: '選択なし'} ,class: 'form-select' %>
    </div>
  </div>
  <div>
    <%= button_tag(icon_with_text("search","検索"), class: "btn btn-primary") %>
    <%= link_to "リセット", post_path(@post), class: "btn btn-outline-secondary" %>
  </div>
<% end %>

$ rails g stimulus search

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="search"
export default class extends Controller {
  connect() {
  }
}

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)

// searchコントローラー作成時に自動追記される（これがないとStimulusを利用できない）
import SearchController from "./search_controller"
application.register("search", SearchController)

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="search"
export default class extends Controller {
  // コントローラーに紐づく要素（=フォーム）をsubmitするアクション
  submit() {
    // セットされているTimeoutをクリアする
    clearTimeout(this.timeout)

    // Timeoutをセットする
    // 200ms後にリクエストを実行する
    // 連続で実行されるとTimeoutはクリアされるため、最後の処理だけしか実行されない
    this.timeout = setTimeout( ()=> {
      this.element.requestSubmit()
    }, 200)
  }
}

<%= search_form_for @search,
      url: post_path(@post),
      html: {
        data: {
          controller: "search",
          action: "input->search#submit"
          }
       } do |f| %>

  ・・・

<% end %>

<%= search_form_for @search, url: post_path(@post) do |f| %>
  
  ・・・

  <div>
    <!-- 検索ボタンを削除する -->
    <!-- <%= button_tag(icon_with_text("search","検索"), class: "btn btn-primary") %> -->
    <%= link_to "リセット", post_path(@post), class: "btn btn-outline-secondary" %>
  </div>
<% end %>