صندوق التحرير والسرد · الأنماط

    <.combobox
  id="airport-combobox"
  class="combobox"
  placeholder={~t"Search…"}
  items={@items}
  filter={false}
  on_input_value_change="filter_airports"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" /></:clear_trigger>
</.combobox>

  

    defmodule MyAppWeb.AirportComboboxLive do
  use MyAppWeb, :live_view

  defp all_rows do
    [
      %{value: "LHR", label: ~t"London Heathrow (LHR)"},
      %{value: "CDG", label: ~t"Paris Charles de Gaulle (CDG)"},
      %{value: "JFK", label: ~t"New York John F. Kennedy (JFK)"}
    ]
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :items, Corex.List.new(all_rows()))}
  end

  def handle_event("filter_airports", %{"reason" => "clear-trigger"}, socket) do
    {:noreply, assign(socket, :items, Corex.List.new(all_rows()))}
  end

  def handle_event("filter_airports", %{"reason" => "item-select"}, socket), do: {:noreply, socket}

  def handle_event("filter_airports", %{"value" => value}, socket) when is_binary(value) do
    q = value |> String.trim() |> String.downcase()

    rows =
      if q == "" do
        all_rows()
      else
        Enum.filter(all_rows(), fn r -> String.contains?(String.downcase(r.label), q) end)
      end

    {:noreply, assign(socket, :items, Corex.List.new(rows))}
  end

  def handle_event("filter_airports", _, socket), do: {:noreply, socket}

  def render(assigns) do
    ~H|
    <.combobox
      id="airport-combobox"
      class="combobox"
      placeholder={~t"Search…"}
      items={@items}
      filter={false}
      on_input_value_change="filter_airports"
    >
      <:empty>No results</:empty>
      <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
      <:clear_trigger><.heroicon name="hero-backspace" /></:clear_trigger>
    </.combobox>
    |
  end
end

  

    <.combobox
  id="airport-combobox-grouped"
  class="combobox"
  placeholder={~t"Search…"}
  items={@items}
  filter={false}
  on_input_value_change="filter_airports_grouped"
>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" /></:clear_trigger>
</.combobox>

  

    defmodule MyAppWeb.AirportComboboxGroupedLive do
  use MyAppWeb, :live_view

  defp all_rows do
    [
      %{value: "LHR", label: ~t"London Heathrow (LHR)", group: "London"},
      %{value: "LGW", label: ~t"London Gatwick (LGW)", group: "London"},
      %{value: "STN", label: ~t"London Stansted (STN)", group: "London"},
      %{value: "JFK", label: ~t"New York John F. Kennedy (JFK)", group: "New York"},
      %{value: "LGA", label: ~t"New York LaGuardia (LGA)", group: "New York"},
      %{value: "EWR", label: ~t"Newark Liberty (EWR)", group: "New York"},
      %{value: "CDG", label: ~t"Paris Charles de Gaulle (CDG)", group: "Paris"},
      %{value: "ORY", label: ~t"Paris Orly (ORY)", group: "Paris"},
      %{value: "IST", label: ~t"Istanbul Airport (IST)", group: "Istanbul"},
      %{value: "SAW", label: ~t"Istanbul Sabiha Gökçen (SAW)", group: "Istanbul"}
    ]
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :items, Corex.List.new(all_rows()))}
  end

  def handle_event("filter_airports_grouped", %{"reason" => "clear-trigger"}, socket) do
    {:noreply, assign(socket, :items, Corex.List.new(all_rows()))}
  end

  def handle_event("filter_airports_grouped", %{"reason" => "item-select"}, socket), do: {:noreply, socket}

  def handle_event("filter_airports_grouped", %{"value" => value}, socket) when is_binary(value) do
    q = value |> String.trim() |> String.downcase()

    rows =
      if q == "" do
        all_rows()
      else
        Enum.filter(all_rows(), fn r -> String.contains?(String.downcase(r.label), q) end)
      end

    {:noreply, assign(socket, :items, Corex.List.new(rows))}
  end

  def handle_event("filter_airports_grouped", _, socket), do: {:noreply, socket}

  def render(assigns) do
    ~H|
    <.combobox
      id="airport-combobox-grouped"
      class="combobox"
      placeholder={~t"Search…"}
      items={@items}
      filter={false}
      on_input_value_change="filter_airports_grouped"
    >
      <:empty>No results</:empty>
      <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
      <:clear_trigger><.heroicon name="hero-backspace" /></:clear_trigger>
    </.combobox>
    |
  end
end