---
title: "Discussion on \"Turbo Frame Search Filters\" | Hashnode"
description: "Discussion on \"Turbo Frame Search Filters\". Create a search filter using Turbo Frames and Stimulus."
url: "https://hashnode.com/posts/turbo-frame-search-filters/65b27372481a74d4adc504b3"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Turbo Frame Search Filters](https://code.avi.nyc/turbo-frame-search-filters?utm_source=hashnode&utm_medium=feed)

Create a search filter using Turbo Frames and Stimulus.

Jan 25, 2024 · 6 min read · code.avi.nyc  
Read the article

-   [#turbo-frames](https://hashnode.com/tag/turbo-frames)
-   [#rails](https://hashnode.com/tag/rails)
-   [#stimulus](https://hashnode.com/tag/stimulus)

## Written by

[Avi Flombaum](https://hashnode.com/@avinyc)

@avinyc · New York, NY

  
[View profile](https://hashnode.com/@avinyc)

Engineer, educator, and entrepreneur that loves building products.

I'm an engineer, educator, and entrepreneur that has been building digital products for over 20 years with experience in startups, education, technical training, and developer ecosystems. I founded Flatiron School in NYC where I taught thousands of people how to code. Previously, I was the founder of Designer Pages. Currently I'm the Chief Product Officer at Revature.

## Responses 2

Markdown supported · ⌘↵ to post

[Stefanos N.](https://hashnode.com/@Stefanos450)

[Aug 19, 2024](https://hashnode.com/posts/turbo-frame-search-filters/65b27372481a74d4adc504b3/comment/66c3bdca78063598141b4f98)

Hi Avi, thanks a lot for this, it's super helpful and extremely fast.

Another question I would have is how would you handle counters for these filters? Let's say we have counters next to each filter and on each filter selection, should update all the other filter counters

[Matias H. Leidemer](https://hashnode.com/@matiasleidemer)

[Feb 13, 2024](https://hashnode.com/posts/turbo-frame-search-filters/65b27372481a74d4adc504b3/comment/65cbd3e6d453171b80e4486a)

Hey there, Avi; thank you for sharing this post!

I was trying it on my machine, and as it turns out, we don't even need to create a custom stimulus controller.

All you need to do is set the form's data-turbo-frame="jobs" attribute and, instead of using the TurboVisit + FormData combo, call the form's requestSubmit() function.

```
<form data-turbo-frame="jobs" etc>
  <%= select_tag :category, etc, onchange: "this.form.requestSubmit()" %>
</form>
```

More info:

-   [turbo.hotwired.dev/handbook/drive](https://turbo.hotwired.dev/handbook/drive#form-submissions)
-   [developer.mozilla.org/en-US/docs/Web/API/HTMLForm…](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit)

Let me know what you think, cheers!

[Avi Flombaum](https://hashnode.com/@avinyc)

[Feb 13, 2024](https://hashnode.com/posts/turbo-frame-search-filters/65b27372481a74d4adc504b3/comment/65cbd3e6d453171b80e4486a#reply-65cbd795fb1288821e6a8bc7)

Ya, you could bind the onchange event to each form field to then use requestSubmit or just wrap it all in a Stimulus controller. Thanks for adding to the article! <3