Ember-power-select-with-create
Simple variation of ember-power-select that allows you to create a new entry based on the search text.
Installation
ember install ember-power-select-with-create
Compatibility
- Ember Power Select v3 or above
Please also refer to Ember Power Select documentation for it's compatibility notes.
Usage
If you want to be able to select multiple options, use the <PowerSelectMultipleWithCreate>
component instead. It has the same API as the normal <PowerSelectWithCreate>
.
For more options please refer to the Ember Power Select docs.
Control if create option should be shown
You can provide a callback showCreateWhen
, which will be called whenever the user types into the search field.
If you return true
, the create option will be shown. If you return false
, it won't be shown.
import Component from '@ember/component';
import { action } from '@ember/object';
export default class MyComponent extends Component {
@action
hideCreateOptionOnSameName(term) {
let existingOption = this.countries.find(({ name }) => name === term);
return !existingOption;
}
}
Control create option position
You can provide showCreatePosition
property to control the position(bottom|top) of create option. It should be either "top"
or "bottom"
. It defaults to "top"
.
Add "{{option}}"...
Control the create option's label - Default You can provide the buildSuggestion
action to control the label of the create option. Default - Add "{{option}}"...
import Component from '@ember/component';
import { action } from '@ember/object';
export default class MyComponent extends Component {
@action
customSuggestion(term) {
return `Create ${term}`;
}
}
Pass the creation option to a component for more control
Beyond building the suggestion label, you can pass the suggestedOptionComponent
property the name of your component.
This component will receive the suggestedOption itself as option
and the current term
as term
.