Select Search

A powerful select component with search and built-in validation using ember-power-select

Examples

Basic usage

Find your favorite ember repository on Github
Disabled Select Search
Select Search with Error
Please select a repository

Properties

Name Type Required Description
@validationField string Yes The field name in the changeset to validate
@changeset Changeset Yes The changeset instance containing the form data and validation logic
@options Array Yes An array of selectable options that will be displayed in the dropdown. Each option should have a toString() method for display
@onSearch function Yes A function or ember-concurrency task that handles search logic. Receives the search term as a parameter and should return filtered options. Use with (perform this.onSearch) when using tasks
@label string No Optional label text displayed above the select field
@placeholder string No Placeholder text displayed when no option is selected
@disabled boolean No Boolean flag to disable the select input, preventing user interaction
@multiple boolean No Enables multi-select mode allowing selection of multiple options
@initiallyOpened boolean No Opens the dropdown automatically when the component is rendered
@mandatory boolean No If true, requires a value to be selected, affecting validation behavior
@allowClear boolean No Shows a clear button to remove the selected value when enabled
@onChange function No Callback function triggered when the selection changes, receives the new selected value(s)
@labelComponent Component No Custom component to render the label, allowing full customization of label appearance
@selectedItemComponent Component No Custom component to render the selected item in the trigger, providing control over how selections are displayed
@placeholderComponent Component No Custom component to render when no selection is made, replacing default placeholder text
@searchPlaceholder string No Placeholder text displayed in the search input field
@searchMessage string No Message displayed while user is typing in the search field
@loadingMessage string No Message displayed while search results are being loaded (useful for async searches)
@noMatchesMessage string No Message displayed when the search returns no matching results