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 most cases the suggest_fun
runs an operation that could be deferred,
so by default, the async={true}
attr calls it in a background Task
and updates the suggestions asynchronously. This way, you can render
the component without having to wait for suggestions to load.
If you explicitly need to make the operation sychronous, you may
pass async={false}
option.
If your initial options
are not provided up-front at initial render,
lack of options
attr value combined with async=true
calls the
suggest_fun.("", [])
asynchronously - that special clause can be used
to provide the initial set of suggestions updated right after the initial render.
To simplify integration testing, suggestions load up synchronously during tests. This lets you skip waiting for suggestions messages to arrive. The asynchronous behaviour alone is already tested in ComboBox own test suite, so there is no need for additional verification.
Summary
Functions
Attributes
ref
(:string
) (required)suggestions
(:list
) - Defaults to[]
.suggest_fun
(:any
) (required)target
(:any
)creatable
(:boolean
) (required)display_value
(:string
) (required)
Attributes
id
(:any
) (required)
Callback implementation for Phoenix.LiveComponent.handle_event/3
.
Attributes
display_value
(:string
) (required)submit_value
(:string
) (required)ref
(:string
) (required)target
(:any
)idx
(:integer
) (required)creatable
(:boolean
) - Defaults tofalse
.
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 tofalse
.creatable
(:boolean
) - Defaults tofalse
.errors
(:list
) - Defaults to[]
.async
(:boolean
) - Defaults totrue
.on_selection_made
(:any
)
Callback implementation for Phoenix.LiveComponent.update/2
.
Functions
Attributes
ref
(:string
) (required)suggestions
(:list
) - Defaults to[]
.suggest_fun
(:any
) (required)target
(:any
)creatable
(:boolean
) (required)display_value
(:string
) (required)
Attributes
id
(:any
) (required)
Callback implementation for Phoenix.LiveComponent.handle_event/3
.
Attributes
display_value
(:string
) (required)submit_value
(:string
) (required)ref
(:string
) (required)target
(:any
)idx
(:integer
) (required)creatable
(:boolean
) - Defaults tofalse
.
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 tofalse
.creatable
(:boolean
) - Defaults tofalse
.errors
(:list
) - Defaults to[]
.async
(:boolean
) - Defaults totrue
.on_selection_made
(:any
)
Callback implementation for Phoenix.LiveComponent.update/2
.