Ember Power Select

components.my-select.js

import Ember from 'ember';
import { task, timeout} from 'ember-concurrency';

const { inject } = Ember;
const DEBOUNCE_MS = 600;

export default Ember.Component.extend({
  intl: inject.service(),
  store: inject.service(),
  allowClear: true,
  didRender() {
    this._super(...arguments);
    let searchMessage = this.get('intl').t('actions.search');
    if (this.get('searchEnabled') === false){
      this.set('searchMessage', null);
    } else {
      this.set('searchMessage', searchMessage);
    }
  },
  actions: {
    hideCreateOption(){
      let hideCreate = true;
      if (this.get('hideCreateOption')){
        hideCreate = false;
      }
      return hideCreate;
    },
    onChange(selected){
      if (this.get('customChange')) {
        this.get('customChange')(selected);
      }  else {
        this.set('selected', selected);
      }
    },
    createResource(value){
      // The resourceField is used to create and filter the resource
      let field = this.get('resourceField');
      let resource = this.get('resource');
      let newRecord = this.get('store').createRecord(resource, {[field]: value});
      this.set("selected", newRecord);
      newRecord.save();
    },
    customSuggestion(term) {
      let label = this.get('intl').t('actions.add');
      return `${label} "${term}"`;
    },
    searchRemote(term) {
      return this.get('searchRepo').perform(term);
    }
  },
  searchRepo: task(function* (term) {
    yield timeout(DEBOUNCE_MS);
    let field = this.get('resourceField');
    let resource = this.get('resource');
    let response = yield this.get('store').query(resource, {filter: {[field]: term} }).then((json)=> json);
    return response;
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

models.client.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: DS.attr('string'),
});

models.deal.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  title: DS.attr('string'),
  client: DS.belongsTo('client'),
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return Ember.RSVP.hash({
      deal: this.store.findRecord('deal', params.deal_id),
    });
  }
});

templates.application.hbs

{{my-select
  customChange=(action "onChangeClient" model.deal)
  resourceField="name"
  resource="client"
  label="Empresa"
selected=model.deal.client}} 

templates.components.my-select.hbs

<div>
  {{#if label}}
    <label>{{label}}</label>
  {{/if}}
  {{#power-select
    disabled=disabled
    options=options
    search=(action "searchRemote")
    searchEnabled=searchEnabled
    selected=selected
    placeholder=placeholder
    onchange=(action "onChange")
    destination="customized-destination"
    buildSuggestion=(action "customSuggestion")
    searchMessage=searchMessage
    loadingMessage=(t 'actions.loading')
    noMatchesMessage=(t 'actions.notFound')
    allowClear=allowClear
    renderInPlace=true
    showCreateWhen=(action "hideCreateOption") as |result|
  }}
    {{result.name}} {{result.description}} {{result.title}}
  {{/power-select}}
</div>
<div id="customized-destination"></div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
    "ember-power-select" "1.10.4"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}