Example of real-time search bar implementation in Phoenix LiveView and Tailwind. Working example on https://travelermap.net/parks/usa

1_searchbar_live.ex

defmodule TravelerWeb.SearchbarLive do
  use TravelerWeb, :live_view

  alias Phoenix.LiveView.JS
  alias Traveler.Places

  def mount(_params, _session, socket) do
    socket = assign(socket, places: [])
    {:ok, socket, layout: false}
  end

  def handle_event("change", %{"search" => %{"query" => ""}}, socket) do
    socket = assign(socket, :places, [])
    {:noreply, socket}
  end

  def handle_event("change", %{"search" => %{"query" => search_query}}, socket) do
    places = Places.search(search_query)
    socket = assign(socket, :places, places)

    {:noreply, socket}
  end

  def open_modal(js \\ %JS{}) do
    js
    |> JS.show(
      to: "#searchbox_container",
      transition:
        {"transition ease-out duration-200", "opacity-0 scale-95", "opacity-100 scale-100"}
    )
    |> JS.show(
      to: "#searchbar-dialog",
      transition: {"transition ease-in duration-100", "opacity-0", "opacity-100"}
    )
    |> JS.focus(to: "#search-input")
  end

  def hide_modal(js \\ %JS{}) do
    js
    |> JS.hide(
      to: "#searchbar-searchbox_container",
      transition:
        {"transition ease-in duration-100", "opacity-100 scale-100", "opacity-0 scale-95"}
    )
    |> JS.hide(
      to: "#searchbar-dialog",
      transition: {"transition ease-in duration-100", "opacity-100", "opacity-0"}
    )
  end
end

2_searchbar_live.html.heex

<div class="block max-w-xs flex-auto">
  <button
    type="button"
    class="hidden text-gray-500 bg-white hover:ring-gray-500 ring-gray-300 h-8 w-full items-center gap-2 rounded-md pl-2 pr-3 text-sm ring-1 transition lg:flex focus:[&:not(:focus-visible)]:outline-none"
    phx-click={open_modal()}
  >
    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5 stroke-current">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
      >
      </path>
    </svg>
    Find something...
  </button>
</div>

<div
  id="searchbar-dialog"
  class="hidden fixed inset-0 z-50"
  role="dialog"
  aria-modal="true"
  phx-window-keydown={hide_modal()}
  phx-key="escape"
>
  <div class="fixed inset-0 bg-zinc-400/25 backdrop-blur-sm opacity-100"></div>
  <div class="fixed inset-0 overflow-y-auto px-4 py-4 sm:py-20 sm:px-6 md:py-32 lg:px-8 lg:py-[15vh]">
    <div
      id="searchbox_container"
      class="mx-auto overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-zinc-900/7.5 sm:max-w-xl opacity-100 scale-100"
      phx-hook="SearchBar"
    >
      <div
        role="combobox"
        aria-haspopup="listbox"
        phx-click-away={hide_modal()}
        aria-expanded={@places != []}
      >
        <form action="" novalidate="" role="search" phx-change="change">
          <div class="group relative flex h-12">
            <svg
              viewBox="0 0 20 20"
              fill="none"
              aria-hidden="true"
              class="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-zinc-500"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
              >
              </path>
            </svg>

            <input
              id="search-input"
              name="search[query]"
              class="flex-auto rounded-lg appearance-none bg-transparent pl-10 text-zinc-900 outline-none focus:outline-none border-slate-200 focus:border-slate-200 focus:ring-0 focus:shadow-none placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden pr-4"
              style={
                @places != [] &&
                  "border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none"
              }
              aria-autocomplete="both"
              aria-controls="searchbox__results_list"
              autocomplete="off"
              autocorrect="off"
              autocapitalize="off"
              enterkeyhint="search"
              spellcheck="false"
              placeholder="Find something..."
              type="search"
              value=""
              tabindex="0"
            />
          </div>

          <ul
            :if={@places != []}
            class="divide-y divide-slate-200 overflow-y-auto rounded-b-lg border-t border-slate-200 text-sm leading-6"
            id="searchbox__results_list"
            role="listbox"
          >
            <%= for place <- @places do %>
              <li id={"#{place.id}"}>
                <.link
                  navigate={~p"/places/#{place.slug}"}
                  class="block p-4 hover:bg-slate-100 focus:outline-none focus:bg-slate-100 focus:text-sky-800"
                >
                  <%= place.name %>
                </.link>
              </li>
            <% end %>
          </ul>
        </form>
      </div>
    </div>
  </div>
</div>

3_places.ex

defmodule Traveler.Places do
  import Ecto.Query, warn: false
  alias Traveler.Repo
  alias Traveler.Places.Place
  
  def search(search_query) do
    search_query = "%#{search_query}%"

    Place
    |> order_by(asc: :name)
    |> where([p], ilike(p.name, ^search_query))
    |> limit(5)
    |> Repo.all()
  end
end

4_SearchBar.ts

// This is optional phoenix client hook. It allows to use key down and up to select results.

export const SearchBar = {
  mounted() {
    const searchBarContainer = (this as any).el as HTMLDivElement
    document.addEventListener('keydown', (event) => {
      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
        return
      }

      const focusElemnt = document.querySelector(':focus') as HTMLElement

      if (!focusElemnt) {
        return
      }

      if (!searchBarContainer.contains(focusElemnt)) {
        return
      }

      event.preventDefault()

      const tabElements = document.querySelectorAll(
        '#search-input, #searchbox__results_list a',
      ) as NodeListOf<HTMLElement>
      const focusIndex = Array.from(tabElements).indexOf(focusElemnt)
      const tabElementsCount = tabElements.length - 1

      if (event.key === 'ArrowUp') {
        tabElements[focusIndex > 0 ? focusIndex - 1 : tabElementsCount].focus()
      }

      if (event.key === 'ArrowDown') {
        tabElements[focusIndex < tabElementsCount ? focusIndex + 1 : 0].focus()
      }
    })
  },
}

This is incredible! Exactly what I was looking for! And to see it in action was so cool to see. Incredibly fast.

I went on and left two reviews, and everything is so snappy! Thanks for sharing ❤️

@mrcampbell Thanks for the reviews!

Thank you for sharing this great code. It tried it as a Live Component and it works like a charm.

thank you for sharing

That is an awesome piece of functionality and great example of code, thanks for sharing!

Great job! I've only one suggestion regarding this:

            <%= for place <- @places do %>
              <li id={"#{place.id}"}>

It could be like this:

            <li :for={place <- @places} id={place.id}>

And you can remove the <% end %> ;-)

Thanks for the snippet @caspg. Very helpful. One question - in the working app travelermap the search functionality is part of the global menu where one can access it from any page. How did you do it, structure it? Did you create a live component out of the code you present here or there is some different approach I miss. I'm very new to web dev and to Phoenix, so please bear with me if the question is trivial.

I managed to recreate locally, even hooked it up to a full text search SQLite, but I only have it working on one page and I need it like you in the global menu. Thanks

Thank you for sharing this great code. It tried it as a Live Component and it works like a charm.

@karim-semmoud could you share your approach to making it a live component? Thanks