YouTube-style autocomplete
We'll get to a simpler example soon 😄.
It's okay if you don't understand everything yet. You will. But for now,
know that this is as complicated as it will get (which is not a lot!).
This search input is an async combobox. Try it out!
It's fetching its options from the server by hitting searchables_path
and expecting a Turbo Stream template in return. If you scroll down far enough,
you'll see the options are loaded in batches.
Below is all the code you need to create one of these.
In your template
1 2 3 4 |
<%= form_with url: search_url do |form| %> <%= form.combobox :search, searchables_path, name_when_new: :search, mobile_at: "0px" %> <% end %> |
In views/searchables/index.turbo_stream.erb
1 2 3 |
<%= async_combobox_options @page.records,
render_in: { partial: "searchables/searchable" },
next_page: @page.last? ? nil : @page.next_param %>
|
That's it!
Now, before I explain all the options you can pass to the combobox, let's take a look at
that simpler example I promised.