Rails 7 filter with Turbo

rubyonrails-talk
1

Hello, how can be build a filter with turbo?

2

Hi @vmvwebworks,

What is it that you would like to filter?

3

Hi Kiril, simple as create a search filter, type something and get results with Turbo I been trying it and don’t find the way. All the time unknown format messages for turbo_stream.

4

Would you like to have the filter in the url?

Like

/articles?search_term=foo

5

for example, and something like ajax render, but in the new way.

6

Hi @vmvwebworks It is possible to get it working, but to help you I would need a little more specific requirement.

If you want to have a place on the page that shows results you can have

<turbo-frame id="search_result" src="/search_results?term=foo">
  <p>This message will be replaced by the response from /search_results.</p>
</turbo-frame>

You can follow the tutorial right here - Turbo Handbook or the tutorial right here - HTML Over The Wire | Hotwire

Both of them will show you how to build a form with an input field and a button. The input field could be used for the search term and the button for search.

The only thing that is not in the tutorials is how to build the controllers. Lets see that you are searching for messages (based on the examples above), then the controller will be

class MessagesController < ApplicationController
  def index
    @messages = ...do a search based on params[:term]
  end

end

I get that a few pieces are missing, I could try to come up with a tutorial of how to do a search. Check back in a few days if you haven’t figured it out

1 Like
7

thank you so much @kmitov hope i can help you if needed.

8

still rendering just the entire page on the route

i’m doing this in header

  = turbo_frame_tag "ingredients_filter" do
      = form_with url: ingredients_filter_path, method: "get" do |form|
        = search_field_tag('ingredients_filter', params[:s], class: "input is-rounded is-large is-shadowless is-info")

and this on the ingredients_filter.html.erb


<%= turbo_frame_tag "ingredients_filter" do%>
  <%= render partial: "/recipes/recipe", collection: @recipes %>
<% end %>
9

If you want to do something like this… Loom | Free Screen & Video Recording Software | Loom

Maybe you can check this post: Dynamic filters with rails and hotwire

1 Like
10

Create a frame field to show the results.

<%= turbo_frame_tag 'search_results' %>

For the search process, create a form that points to the same area as the frame you have given to the area where you will display the results.

<%= form_with(@resource, data: { turbo_frame: 'search_results' } ' %>
  <!-- Form content and filter fields -->
<% end %>

When the form is submitted, the frame will be refreshed when it returns content wrapped with the same frame as the return value.

It would be better to set the form as GET for such filtering operations and usually direct it to the index action.