User Live Search with Stimulus, Turbo Frames and PgSearch

Curated ago by @jeremysmithco


Here’s a solution I’ve used on a project to add a user switcher dropdown with typeahead search to a navbar. It uses the pg_search gem for Postgres full-text search.

There are a lot of blog posts out there with similar solutions, with terms like: typeahead, autocomplete, autosuggest, instant search.

<%= link_to user.full_name, user_path(user),  data: { turbo_frame: "_top" }, class: "block px-1 py-1 text-sm text-blue-500 hover:bg-blue-500 hover:text-white" %>

Using data-turbo-frame="_top" to break out of the frame when navigating to the user view.