How to create a reusable autocomplete search component?

defmodule LevelWeb.UI.AutocompleteDropdown do
  @moduledoc false
  use LevelWeb, :live_component

  @variants %{
    default: %{
      select_container: "px-[1rem] py-[0.5rem] border border-[#D0D5DD] rounded-full bg-white",
      placeholder_text: "text-base font-normal",
      icon: "fa-caret-down text-base"
    },
    primary: %{
      select_container: "pl-[1.5rem] py-[0.625rem] pr-[1.25rem] border border-[#D0D5DD] rounded-lg bg-white",
      placeholder_text: "text-sm font-medium",
      icon: "fa-chevron-down text-[0.625rem]"
    },
    primary_rounded: %{
      select_container: "pl-[1.5rem] py-[0.625rem] pr-[1.25rem] border border-[#D0D5DD] rounded-full bg-white",
      placeholder_text: "text-sm font-medium",
      icon: "fa-chevron-down text-[0.625rem]"
    }
  }

  @dynamic_styles %{
    select_container: "border-blue"
  }

  @impl Phoenix.LiveComponent
  def mount(socket) do
    socket =
      socket
      |> assign_new(:menu_open?, fn -> false end)
      |> assign_new(:placeholder_text, fn -> "Choose Major(s)" end)
      |> assign_new(:variant, fn -> :default end)
      |> assign_new(:chip_variant, fn -> :primary end)

    {:ok, socket}
  end

  @impl Phoenix.LiveComponent
  def render(assigns) do
    assigns =
      assigns
      |> assign_new(:target, fn -> assigns.id end)
      |> assign_new(:key, fn -> nil end)
      |> assign_new(:render_chips?, fn -> true end)

    ~H"""
    <div class="autocomplete-parent"> 
      <div class="relative">
        <input id={"#{@id}-search-input"} class="relative w-full appearance-none border border-gray-detailBorder rounded-xl bg-transparent py-0.5  pr-1 text-sm placeholder:text-[#666] focus:outline-none lg:w-[36rem]" type="text" list="matches" placeholder="Search.." />
        <datalist id="matches">
          <option>test1</option>
          <option>test2</option>
          <option>test3</option>
        </datalist>

      </div>
    </div>
    """
  end

  @impl Phoenix.LiveComponent
  def handle_event("toggle_menu", _, socket) do
    socket = assign(socket, :menu_open?, !socket.assigns.menu_open?)

    {:noreply, socket}
  end

  @impl Phoenix.LiveComponent
  def handle_event("close_menu", _, socket) do
    socket = assign(socket, :menu_open?, false)

    {:noreply, socket}
  end

  @spec is_selected?(map(), list(map())) :: boolean()
  defp is_selected?(item, selected_items) do
    Enum.find(selected_items, fn i -> i.value == item.value end) != nil
  end
end