2.8 KiB
2.8 KiB
SearchSelect
The SearchSelect is an implementation of the ember-power-select used for form elements where options come dynamically from the API.
Params
| Param | Type | Default | Description |
|---|---|---|---|
| id | string |
The name of the form field | |
| models | Array |
An array of model types to fetch from the API. | |
| onChange | function |
The onchange action for this form field. | |
| inputValue | string | Array |
A comma-separated string or an array of strings. | |
| label | string |
Label for this form field | |
| fallbackComponent | string |
name of component to be rendered if the API call 403s | |
| [backend] | string |
name of the backend if the query for options needs additional information (eg. secret backend) | |
| [disallowNewItems] | boolean |
false |
Controls whether or not the user can add a new item if none found |
| [helpText] | string |
Text to be displayed in the info tooltip for this form field | |
| [selectLimit] | number |
A number that sets the limit to how many select options they can choose | |
| [subText] | string |
Text to be displayed below the label | |
| [subLabel] | string |
a smaller label below the main Label | |
| [wildcardLabel] | string |
when you want the searchSelect component to return a count on the model for options returned when using a wildcard you must provide a label of the count e.g. role. Should be singular. | |
| options | Array |
Advanced usage - options can be passed directly from the outside to the power-select component. If doing this, models should not also be passed as that will overwrite the passed value. |
|
| search | function |
Advanced usage - Customizes how the power-select component searches for matches - see the power-select docs for more information. |
Example
<SearchSelect @id="group-policies" @models={{["policies/acl"]}} @onChange={{onChange}} @selectLimit={{2}} @inputValue={{get model valuePath}} @helpText="Policies associated with this group" @label="Policies" @fallbackComponent="string-list" />
See