Remote Search Component

A standalone command menu that queries your server as you type, streaming results back with Turbo.

Preview

Try typing to filter (this demo uses static results; in your app they come from the server):

<%# Basic usage: %>
<%= basecoat_remote_search_tag("/posts/search") %>

<%# With custom turbo frame name: %>
<%= basecoat_remote_search_tag("/posts/search", turbo_frame: "custom_frame") %>

<%# With custom placeholder: %>
<%= basecoat_remote_search_tag("/posts/search", placeholder: "Search posts...") %>

The server side

Your controller responds with a Turbo Stream:

# posts_controller.rb
def search
  @posts = Post.where("title LIKE ?", "%#{params[:query]}%")

  respond_to do |format|
    format.turbo_stream
  end
end

And the stream template updates the frame (posts/search.turbo_stream.erb):

<%= turbo_stream.update "_posts_search" do %>
  <% @posts.each do |post| %>
    <%= link_to post.title, post_path(post), role: "menuitem" %>
  <% end %>
<% end %>

Options