Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cibernox/ember-power-select-with-create
Ember-power-select addon with an `Add ${term}` option in the first position
https://github.com/cibernox/ember-power-select-with-create
Last synced: 6 days ago
JSON representation
Ember-power-select addon with an `Add ${term}` option in the first position
- Host: GitHub
- URL: https://github.com/cibernox/ember-power-select-with-create
- Owner: cibernox
- License: mit
- Created: 2015-12-11T17:19:41.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-09-23T22:46:54.000Z (3 months ago)
- Last Synced: 2024-10-29T20:00:39.354Z (2 months ago)
- Language: JavaScript
- Homepage: https://ember-power-select-with-create.pagefrontapp.com/
- Size: 1.56 MB
- Stars: 50
- Watchers: 6
- Forks: 67
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
```sh
ember install ember-power-select-with-create
```
## Compatibility
* Ember.js v3.28 or above
* Ember CLI v3.28 or above
* Ember Power Select v8 or above
Please also refer to [Ember Power Select documentation](https://github.com/cibernox/ember-power-select#ember-power-select) for it's compatibility notes.
## Usage
```hbs
{{country.name}}
```
If you want to be able to select multiple options, use the `` component instead. It has the same API as the normal ``.
For more options please refer to the [Ember Power Select docs](http://www.ember-power-select.com/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.
```hbs
{{country.name}}
```
```js
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"`.
```hbs
{{country.name}}
```
#### 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}}"...`
```hbs
{{country.name}}
```
```js
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, which should be a component, not a string to be embroider compatible.
This component will receive the suggestedOption itself as `option` and the current `term` as `term`.
```hbs
{{country.name}}
```
```hbs
Add "{{term}}"...
```
## Demo
[https://ember-power-select-with-create.pagefrontapp.com/](https://ember-power-select-with-create.pagefrontapp.com/)