Plausible
Plausible
v0.0.1

View Source PlausibleWeb.Live.Components.ComboBox (Plausible v0.0.1)

Phoenix LiveComponent for a combobox UI element with search and selection functionality.

The component allows users to select an option from a list of options, which can be searched by typing in the input field.

The component renders an input field with a dropdown anchor and a hidden input field for submitting the selected value.

The number of options displayed in the dropdown is limited to 15 by default but can be customized. When a user types into the input field, the component searches the available options and provides suggestions based on the input.

Any module exposing suggest/2 function can be supplied via suggest_mod attribute - see the provided ComboBox.StaticSearch.

Summary

Functions

dropdown(assigns)

Attributes

  • ref (:string) (required)
  • suggestions (:list) - Defaults to [].
  • suggest_mod (:atom) (required)
  • target (:any)
  • creatable (:boolean) (required)
  • display_value (:string) (required)
dropdown_anchor(assigns)

Attributes

  • id (:any) (required)
handle_event(binary, params, socket)

Callback implementation for Phoenix.LiveComponent.handle_event/3.

option(assigns)

Attributes

  • display_value (:string) (required)
  • submit_value (:string) (required)
  • ref (:string) (required)
  • target (:any)
  • idx (:integer) (required)
  • creatable (:boolean) - Defaults to false.
render(assigns)

Attributes

  • placeholder (:string) - Defaults to "Select option or search by typing".
  • id (:any) (required)
  • options (:list) (required)
  • submit_name (:string) (required)
  • display_value (:string) - Defaults to "".
  • submit_value (:string) - Defaults to "".
  • suggest_mod (:atom) (required)
  • suggestions_limit (:integer)
  • class (:string) - Defaults to "".
  • required (:boolean) - Defaults to false.
  • creatable (:boolean) - Defaults to false.
select_option(js \\ %JS{}, id, submit_value, display_value)
update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.

Functions

Link to this function

handle_event(binary, params, socket)

View Source

Callback implementation for Phoenix.LiveComponent.handle_event/3.

Link to this function

option(assigns)

View Source

Attributes

  • display_value (:string) (required)
  • submit_value (:string) (required)
  • ref (:string) (required)
  • target (:any)
  • idx (:integer) (required)
  • creatable (:boolean) - Defaults to false.
Link to this function

render(assigns)

View Source

Attributes

  • placeholder (:string) - Defaults to "Select option or search by typing".
  • id (:any) (required)
  • options (:list) (required)
  • submit_name (:string) (required)
  • display_value (:string) - Defaults to "".
  • submit_value (:string) - Defaults to "".
  • suggest_mod (:atom) (required)
  • suggestions_limit (:integer)
  • class (:string) - Defaults to "".
  • required (:boolean) - Defaults to false.
  • creatable (:boolean) - Defaults to false.
Link to this function

select_option(js \\ %JS{}, id, submit_value, display_value)

View Source
Link to this function

update(assigns, socket)

View Source

Callback implementation for Phoenix.LiveComponent.update/2.