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

Versions 0.1.X worked with EPS < 1.0 Version 0.2.X requires EPS 1.0.0-beta.14 or greater.

Usage

{{#power-select-with-create
    options=countries
    selected=selectedCountry
    onchange=(action (mut selectedCountry))
    oncreate=(action "createCountry") as |country term|
}}
  {{country.name}}
{{/power-select-with-create}}

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.

{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    oncreate=(action "createCountry")
    showCreateWhen=(action "hideCreateOptionOnSameName") as |country|
}}
  {{country.name}}
{{/power-select-with-create}}

actions: {
  hideCreateOptionOnSameName(term) {
    let existingOption = this.get('countries').findBy('name', term);
    return !existingOption;
  },
},

Control create option position - Default TOP

You can provide showCreatePosition property to control the position(bottom|top) of create option. Default - top

{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    oncreate=(action "createCountry")
    showCreatePosition='bottom'
    showCreateWhen=(action "hideCreateOptionOnSameName") as |country|
}}
  {{country.name}}
{{/power-select-with-create}}

Control the create option's label - Default `Add "{{option}}"...`

You can provide the buildSuggestion action to control the label of the create option. Default - Add "{{option}}"...

{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    oncreate=(action "createCountry")
    buildSuggestion=(action "customSuggestion")
}}
  {{country.name}}
{{/power-select-with-create}}

actions: {
  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.

{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    oncreate=(action "createCountry")
    suggestedOptionComponent="suggested-option"
}}
  {{country.name}}
{{/power-select-with-create}}

<!-- {{suggested-option option=option term=term}} -->
<span class="is-suggested">
  Add "{{term}}"...
</span>
<!-- {{/suggested-option}} -->

Demo

https://ember-power-select-with-create.pagefrontapp.com/

daegun / ember-power-select-with-create Goto Github PK