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 function can be supplied via suggest_fun attribute

see the provided ComboBox.StaticSearch.

In case the suggest_fun runs an operation that could be deferred, the async=true attr calls it in a background Task and updates the suggestions asynchronously.

Similarly, the initial options don't have to be provided up-front if e.g. querying the database for suggestions at initial render is undesirable. In such case, lack of options attr value combined with async=true will call suggest_fun.("", []) asynchronously

that special clause can be used to provide the initial set of suggestions updated right after the initial render.

Summary

Functions

dropdown(assigns)

Attributes

ref (:string) (required)
suggestions (:list) - Defaults to [].
suggest_fun (:any) (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) - Defaults to [].
submit_name (:string) (required)
display_value (:string) - Defaults to "".
submit_value (:string) - Defaults to "".
suggest_fun (:any) (required)
suggestions_limit (:integer)
class (:string) - Defaults to "".
required (:boolean) - Defaults to false.
creatable (:boolean) - Defaults to false.
errors (:list) - Defaults to [].
async (:boolean) - Defaults to false.

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

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.

Functions

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) - Defaults to [].
submit_name (:string) (required)
display_value (:string) - Defaults to "".
submit_value (:string) - Defaults to "".
suggest_fun (:any) (required)
suggestions_limit (:integer)
class (:string) - Defaults to "".
required (:boolean) - Defaults to false.
creatable (:boolean) - Defaults to false.
errors (:list) - Defaults to [].
async (:boolean) - Defaults to false.

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

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.