Turbocharged realtime search with Ruby on Rails 7

Web-Crunch

beginner rails tutorials beginner ruby on rails coding tutorials hotwire rails how to code learn to code rails 7 ruby on rails hotwire ruby on rails hotwire dev ruby on rails realtime search ruby on rails realtime search tutorial ruby on rails search tutorial ruby on rails stimulus js turbo rails web crunch web development tutorial web-crunch

description

Adding basic search functionality to a Ruby on Rails app is not the toughest task in the book but when you think about it before hotwire.dev was around the process of making "live" search work was rather cumbersome.

This guide is a very primitive example of creating a real-time search form for a resource in a Ruby on Rails 7 application. We'll use various components of the hotwire.dev ecosystem to achieve our goals.

Read the full tutorial here: https://web-crunch.com/posts/turbo-charged-real-time-search-ruby-on-rails-7

Timestamps:

0:00 - Intro 2:25 - Project kickoff 3:59 - Create Band scaffold 4:45 - Configure routing 5:33 - Add search form to bands#index 10:13 - Controller search logic 11:17 - Creating dummy data to search 12:29 - Add new bands partial 15:24 - Account for turbo_frame response in the controller 18:47 - Add new stimulus controller 24:00 - Ways to extend this and improve

Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

♥️ Sponsor me on GitHub https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/turbo-charged-real-time-search-ruby-on-rails-7

💎Ruby on Rails Course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/products/ptt ... https://www.youtube.com/watch?v=9uSenV1O1GA

created

2024-01-11