Building a Live Search Feature with Phoenix LiveView

One of the most powerful features of Phoenix LiveView is its ability to build interactive, real-time features without requiring complex JavaScript. In this tutorial, we’ll build a live search feature with Phoenix LiveView, allowing users to search and filter through data in real-time, without needing to reload the page.

Step 1: Create a New Phoenix Project

If you haven't created a Phoenix project yet, you can create one with LiveView support:

mix phx.new live_search --live
cd live_search
mix phx.server

If you’re adding LiveView to an existing Phoenix project, ensure it’s included in your mix.exs:

defp deps do
  [
    {:phoenix_live_view, "~> 0.17.5"}
  ]
end

Run mix deps.get to fetch the necessary dependencies.

Step 2: Set Up the LiveView for Search

Let’s create the LiveView that will handle the search functionality. For simplicity, we’ll simulate a list of items to search through. In reality, you’d connect this to a database query.

Create a new file search_live.ex:

# lib/live_search_web/live/search_live.ex
defmodule LiveSearchWeb.SearchLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    items = [
      "Phoenix Framework",
      "Elixir Programming",
      "LiveView with Phoenix",
      "Real-time Applications",
      "Building Scalable Apps"
    ]
    {:ok, assign(socket, items: items, search: "")}
  end

  def handle_event("search", %{"query" => query}, socket) do
    filtered_items = filter_items(socket.assigns.items, query)
    {:noreply, assign(socket, search: query, items: filtered_items)}
  end

  defp filter_items(items, query) do
    Enum.filter(items, fn item ->
      String.contains?(String.downcase(item), String.downcase(query))
    end)
  end

  def render(assigns) do
    ~L"""

      <h1>Live Search Feature</h1>


      <ul>
        &lt;%= for item &lt;- @items do %&gt;
          <li>&lt;%= item %&gt;</li>
        &lt;% end %&gt;
      </ul>

    """
  end
end

Step 3: Set Up the Route for Search

Now, you need to set up the route in your router.ex:

# lib/live_search_web/router.ex
defmodule LiveSearchWeb.Router do
  use LiveSearchWeb, :router

  live "/search", LiveSearchWeb.SearchLive
end

Step 4: Run Your Live Search App

Now, you can start the Phoenix server:

mix phx.server

Navigate to http://localhost:4000/search in your browser. You should see a text input field where you can type a query. As you type, the list of items will update dynamically based on the query.

✅ Pros and ❌ Cons of Building a Live Search with Phoenix LiveView

✅ Pros:

• ⚡ Real-time updates without writing JavaScript
• 🧠 Simple and effective for filtering large lists of data
• 🚀 Efficient and easy to integrate with Phoenix applications
• 🛠 Phoenix handles the real-time functionality out of the box

❌ Cons:

• 🧩 Limited to smaller datasets in its current state; large datasets may require server-side pagination
• 📈 May not be suitable for more complex front-end search features (like autocompletion or faceted search)
• 🔄 You must manage all the real-time interactions in Elixir, which can be challenging for larger apps

Summary

Phoenix LiveView makes it easy to build a real-time search feature that responds instantly to user input, without relying on JavaScript or complex front-end frameworks. This tutorial demonstrates how to create a basic live search feature with a list of items, and updates the displayed results dynamically. With LiveView, you can add interactivity to your applications with minimal effort, while keeping your codebase simple and maintainable.

For a deeper dive into creating scalable and performant Phoenix LiveView applications, check out my 20-page PDF guide:

Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns available for $10.

If this was helpful, you can also support me here: Buy Me a Coffee ☕