Real time search with Hotwire

bookmarks_controller.rb

  def search
    @pagy, @bookmarks = if params[:search].present?
      pagy(@bookmarks.search(params[:search]), params: ->(params) { params.merge!({search: params[:search]}) })
    else
      pagy(@bookmarks)
    end
  end

form_submit_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="form-submit"
// Use data-action="input->form-submit#submit" to auto-submit a form on input

export default class extends Controller {
  submit() {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.element.requestSubmit();
    }, 100)
  }
}

index.html.erb

<%= form_with(url: search_path, class: "flex-grow", data: { turbo_stream: true, controller: "form-submit" }) do |form| %>
  <div class="flex items-center justify-center w-full">
    <div class="relative flex items-center w-full flex-wrap">
      <%= form.text_field :search, placeholder: "Search", class: "bg-white border-slate-400 rounded-full grow px-6 py-3 cursor-pointer", data: { action: "input->form-submit#submit" } %>

      <span class="z-10 absolute items-center justify-center w-8 right-0 pr-3 py-3 cursor-pointer">
        <i class="fa-solid fa-magnifying-glass text-slate-900"></i>
      </span>
    </div>
  </div>
<% end %>

routes.rb

  post "search", to: "bookmarks#search"

search.turbo_stream.html

<%= turbo_stream.replace "bookmarks" do %>
  <%= render "bookmarks/bookmarks", { bookmarks: @bookmarks, pagy: @pagy }  %>
<% end %>