Live Search

<%= rui_live_search url: search_posts_path,
      turbo_frame: "search_results",
      placeholder: "Search posts..." %>

<turbo-frame id="search_results">
  <%= render @posts %>
</turbo-frame>

<%= rui_live_search url: search_path, turbo_frame: "results", size: :sm %>

<%= rui_live_search url: search_path, turbo_frame: "results", size: :base %>

<%= rui_live_search url: search_path, turbo_frame: "results", size: :lg %>

<%= rui_live_search url: search_path, turbo_frame: "results", shape: :square %>

<%= rui_live_search url: search_path, turbo_frame: "results", shape: :rounded %>

<%= rui_live_search url: search_path, turbo_frame: "results", shape: :pill %>

<%= rui_live_search url: search_path, turbo_frame: "results", shape: :square, search_button: true %>
<%= rui_live_search url: search_path, turbo_frame: "results", shape: :rounded, search_button: true %>
<%= rui_live_search url: search_path, turbo_frame: "results", shape: :pill, search_button: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      placeholder: "Search...",
      clear_button: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      placeholder: "Search...",
      loading_indicator: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      placeholder: "Search...",
      clear_button: true,
      loading_indicator: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      placeholder: "Search...",
      search_button: true %>

<%= rui_live_search url: products_path,
      turbo_frame: "results",
      placeholder: "Find products...",
      search_button: true,
      search_button_text: "Find" %>

<%= rui_live_search url: users_path,
      turbo_frame: "results",
      placeholder: "Search users...",
      search_button: true,
      search_button_text: "Go" %>

<%= rui_live_search url: search_path, turbo_frame: "results", size: :sm, search_button: true %>
<%= rui_live_search url: search_path, turbo_frame: "results", size: :base, search_button: true %>
<%= rui_live_search url: search_path, turbo_frame: "results", size: :lg, search_button: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      placeholder: "Search everything...",
      search_button: true,
      clear_button: true,
      loading_indicator: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      shortcut: "k" %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      shortcut: "k",
      shortcut_hint: false %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      modal: true,
      shortcut: "m",
      placeholder: "Search posts..." %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      modal: true,
      shortcut: "j" do |search| %>
  <% search.with_trigger do %>
    <div class="flex items-center gap-2">
      <%= rui_icon :search, size: :sm %>
      <span class="text-zinc-500">Search everything...</span>
      <kbd class="text-xs font-mono bg-zinc-100 px-1.5 py-0.5 rounded">⌘J</kbd>
    </div>
  <% end %>
<% end %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      modal: true,
      shortcut: "k",
      placeholder: "Search...",
      voice_search: true,
      scope: [
        { value: "all", label: "All" },
        { value: "posts", label: "Posts" },
        { value: "users", label: "Users" }
      ],
      recent_searches: true,
      loading_indicator: true do |search| %>
  <% search.with_empty_state do %>
    <p class="text-zinc-500 text-center py-8">No results found</p>
  <% end %>
<% end %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      voice_search: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      scope: [
        { value: "all", label: "All" },
        { value: "posts", label: "Posts" },
        { value: "users", label: "Users" },
        { value: "comments", label: "Comments" }
      ],
      scope_default: "all",
      scope_param: :category %>

def index
  @results = case params[:category]
             when "posts" then Post.search(params[:q])
             when "users" then User.search(params[:q])
             when "comments" then Comment.search(params[:q])
             else search_all(params[:q])
             end
end

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      recent_searches: true,
      recent_searches_limit: 10,
      recent_searches_key: "my_app_searches" %>

<%= rui_live_search url: search_path, turbo_frame: "results" do |search| %>
  <% search.with_empty_state do %>
    <div class="text-center py-8">
      <p class="text-zinc-500">No results found</p>
      <p class="text-sm text-zinc-400">Try a different search term</p>
    </div>
  <% end %>
<% end %>

<turbo-frame id="results">
  <% if @results.any? %>
    <%= render @results %>
  <% else %>
  <% end %>
</turbo-frame>

<%= rui_live_search url: search_path, turbo_frame: "results" %>

<%= rui_live_search url: search_path, turbo_frame: "results", debounce: 150 %>

<%= rui_live_search url: search_path, turbo_frame: "results", debounce: 500 %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      min_length: 3 %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      debounce: 500,
      min_length: 2 %>

<%= rui_live_search url: search_path, turbo_frame: "results" %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      param_name: :search %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      param_name: :query %>

# Controller expecting :search param
def index
  @posts = Post.all

  if params[:search].present?
    @posts = @posts.where("title ILIKE ?", "%#{params[:search]}%")
  end
end

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      autofocus: true %>

<%= rui_live_search url: search_path,
      turbo_frame: "results",
      class: "max-w-md mx-auto" %>

<div class="max-w-2xl">
  <%= rui_live_search url: search_path,
        turbo_frame: "results",
        class: "w-full" %>
</div>

class PostsController < ApplicationController
  def index
    @posts = Post.order(created_at: :desc)

    # Filter by search query if present
    if params[:q].present?
      search_term = "%#{params[:q]}%"
      @posts = @posts.where("title ILIKE ? OR body ILIKE ?", search_term, search_term)
    end

    # Turbo Frame requests automatically skip layout
    # No special handling needed!
  end
end

<%= rui_live_search url: posts_path,
      turbo_frame: "posts_list",
      placeholder: "Search posts...",
      clear_button: true,
      loading_indicator: true %>

<turbo-frame id="posts_list">
  <div class="space-y-4">
    <% @posts.each do |post| %>
      <%= render post %>
    <% end %>
  </div>
</turbo-frame>

<form action="/posts" method="get" data-turbo-frame="posts_list">
  <input type="search" name="q" ...>
</form>

<turbo-frame id="posts_list">
  <%= render @posts %>
</turbo-frame>

<turbo-frame id="posts_list">
  <%= render @posts %>
</turbo-frame>

<div class="max-w-xl mx-auto">
  <%= rui_live_search url: posts_path,
        turbo_frame: "blog_results",
        placeholder: "Search articles...",
        size: :lg,
        clear_button: true,
        loading_indicator: true,
        debounce: 300,
        min_length: 2 %>
</div>

<turbo-frame id="blog_results">
  <div class="divide-y">
    <% @posts.each do |post| %>
      <%= render post %>
    <% end %>
  </div>
</turbo-frame>

<%= rui_live_search url: commands_path,
      turbo_frame: "command_results",
      placeholder: "Type a command...",
      size: :sm,
      autofocus: true,
      debounce: 100,
      min_length: 1 %>

<div class="flex items-center gap-4 mb-4">
  <div class="flex-1">
    <%= rui_live_search url: users_path,
          turbo_frame: "users_table",
          placeholder: "Filter users...",
          clear_button: true %>
  </div>
  <%= rui_button "Add User", color: :primary %>
</div>

<turbo-frame id="users_table">
  <%= rui_table do |table| %>
    <% table.with_column(key: :name, label: "Name") %>
    <% table.with_column(key: :email, label: "Email") %>
  <% end %>
</turbo-frame>

// Track search analytics
document.addEventListener("live-search:after-search", (event) => {
  analytics.track("search", { query: event.detail.query })
})

// Cancel certain searches
document.addEventListener("live-search:before-search", (event) => {
  if (event.detail.query.length > 100) {
    event.preventDefault() // Too long, cancel
  }
})

// Track voice search usage
document.addEventListener("voice-search:result", (event) => {
  analytics.track("voice_search", { transcript: event.detail.transcript })
})

// React to recent search selection
document.addEventListener("recent-searches:selected", (event) => {
  console.log("Selected recent:", event.detail.query)
})