Search bar with find as you type autosuggestion along with a LiveView

Phoenix Forum Questions / Help
,
1

I am developing a web application which uses LiveViews for many different views of the app. Now I want to have a search bar in the general layout of the app, i. e. accessible from all views and I want this search bar to be autosuggesting find as you type.

For this autosuggestion I would need to make the search bar part of a LiveView which queries the database after every key stroke. How would this LiveView coexist with the other LiveViews?

My ideas so far:

  • make the wole app a parent LiveView and let this render the layout with the search bar. The other LiveViews then can be a LiveComponent inside of the parent LiveView.
  • put the search bar into an <iframe/> and handle it completely independent from the other views.

I would tend to the letter as the former to me seems to add too much complexity.

Other suggestions, opinions, experiences? What is the best practice here?

2

The way I typically achieve this these days is:

  1. Set up a regular Phoenix Form with a text input and a change event handler.
  2. Add a debounce on the text input, e.g. phx-debounce="500". That way the search doesn’t happen on literally every keystroke. (Which would slam the DB more than necessary.)
  3. In the change handler, perform the search and set the results in an assigns variable.
  4. In the HTML, if there are any search results, display an autosuggest “dropdown”.

I don’t think there’s a need to complicate it with iframes or nested LiveViews.

The docs about debouncing are here:

https://hexdocs.pm/phoenix_live_view/bindings.html#rate-limiting-events-with-debounce-and-throttle

Much could be said about building an effective autosuggest component for [4] but I don’t think that’s the focus of your question.

1 Like
3

Ok. I am not aware of setting an event handler like phx-change (along with phx-debounce) for a <form> or <input> which is not inside a LiveView. Is there an example of this somewhere in the docs?

Or do you mean to implement the event handler in JavaScript?

4

I think @paulstatezny was saying to build it with LiveView, but you don’t need to rewrite everything as one big nested parent LiveView.

If I’m not mistaken, you can write your search box as a standalone LiveView and then live_render(conn/socket, SearchBoxLive) from any view or template, even the root template. It will run as its own isolated LiveView on any page without changing anything else. You might need to check out the :sticky option and remove the live layout in your mount callback with {:ok, socket, layout: false}.

Phoenix.LiveView.Helpers.live_render/3

1 Like
5

That would make sense, thanks. I am using live_render/3 for child LiveComponents. However, I thought that might lead to issues because some of my views are LiveViews and some are not. So at some pages the search box is actually inside a LiveView in others it isn’t.

Thanks for the hint with the :sticky option. I will try it out.

1 Like
6

It didn’t click with me that this is not fully a LiveView app. My bad! :smile:

1 Like