How to render and search 9000+ items in a Combobox?

The Corex combobox component works great for dozens or even hundreds of items. It receives the full list and filters client-side on every keystroke.

But what happens when your list reaches the thousands?

Client-side filtering breaks down. You can’t ship 10,000 items to the browser and call it a day.

The solution: keep rendering client-side, but let the server own the data.

Disable client-side filtering, listen to the input change event, and update the item list on the fly from the server. The component still renders what it receives, you just control what it receives.

For the curious, this has been made possible with the latest update on ZagJS Vanilla machine allowing runtime updates of the props combined with the updated() hook life cycle of Live View

This gives you the best of both worlds:

• Instant client-side rendering, accessibility attributes and keyboard navigation
• Server-side queries that scale to any dataset size
• Full control over the initial state on mount, you can even display a totally different list of items
• Custom empty state slot when nothing matches
• Compatible with groups or items. Search can also include the group name
• Integrates with Phoenix form

Minimal code

defmodule MyAppWeb.CountryCombobox do
  use MyAppWeb, :live_view

  @items [
    %{id: "fra", label: "France"},
    %{id: "bel", label: "Belgium"},
    %{id: "deu", label: "Germany"},
    %{id: "usa", label: "USA"},
    %{id: "jpn", label: "Japan"}
  ]

  def mount(_params, _session, socket) do
    {:ok, assign(socket, items: [])}
  end

  def handle_event("search", %{"value" => value, "reason" => "input-change"}, socket) do
    filtered =
      if byte_size(value) < 1 do
        []
      else
        term = String.downcase(value)
        Enum.filter(@items, fn item ->
          String.contains?(String.downcase(item.label), term)
        end)
      end

    {:noreply, assign(socket, items: filtered)}
  end

  def render(assigns) do
    ~H"""
    <.combobox
      id="country-combobox"
      collection={@items}
      filter={false}
      on_input_value_change="search"
    >
      <:empty>No results</:empty>
      <:trigger><.icon name="hero-chevron-down" /></:trigger>
    </.combobox>
    """
  end
end

Disable client filtering with disabled={false}
Use on_input_value_change to filter on the server.
This example uses a local list, you can replace it with a database query.

Try it yourself, search over 9000 airports grouped across 250 cities.

https://corex.gigalixirapp.com/en/live/combobox-form

Dark Mode Toggle

Built on Corex.ToggleGroup, it uses a triple-layer approach (cookies + localStorage + immediate script execution) to ensure:

• No FOUC (Flash of Unstyled Content)
• Syncs across browser tabs
• Respects system preferences
• Works perfectly with LiveView and controllers

Signature Pad

• Full Phoenix form integration (controllers & LiveView)
• Works with and without Ecto changesets
• Controlled/uncontrolled modes
• Customizable drawing options (color, size, pressure simulation)

Signature Pad joins the growing collection of form components (checkbox, select, date picker) that work seamlessly in both traditional controllers and LiveView, with or without Ecto Changeset

Happy coding

Release 0.1.0-alpha.23

11 new components:

• Angle Slider
• Avatar
• Carousel
• Editable
• Floating Panel
• Listbox
• Number Input
• Password Input
• Pin Input
• Radio Group
• Timer.

So far the development has been pleasant and thanks to my previous integration for static websites, I can focus on the component architecture and life cycle instead of the Vanilla JS integration details.

I would say that core integration of ZagJS is easier on Phoenix compared to a static site because we are able to render server side. While on a static website we require the client to handle the whole structure.

On the other hand, on a static website there is no server updates, or in our case Live View life cycle, which adds another level of integration complexity.

Next is to test and document the missing form components integrations for controllers, Liveview and Ecto changesets

The demo site has been updated with the new components.

Happy coding