type ahead

components.my-tag.js

import Ember from 'ember';

const {isBlank, computed} = Ember;

function isEnterPressed(e){
  return e.keyCode === 13; 
}

const isTypingFinished=isEnterPressed;

function isTextSuitable(select){
  let searchText = select.searchText;
  return !isBlank(searchText) && searchText.length>2 ; //!select.highlighted removed
}

export default Ember.Component.extend({
  tagName:'',

  _options:computed('options.[]', function(){
    let options = Ember.A();
    if(this.get('options')){
      options.pushObjects(this.get('options'));
    }
    return options;
  }),

  _selected:computed('selected.[]', function(){
    let selected = Ember.A();
    if(this.get('selected')){
      selected.pushObjects(this.get('selected'));
    }
    return selected;
  }),

  _placeholder: computed('placeholder', 'promptText', function(){
    return this.get('promptText') || this.get('placeholder');
  }),

  _searchField: computed('searchField', 'displayProperty', 'valueProperty', function () {
    return this.get('searchField') || this.get('displayProperty') || this.get('valueProperty');
  }),

  _triggerClass:computed('class', 'triggerId', function () {
    let currentClass = this.get('class') || "";
    let triggerId = this.get('triggerId') || "";
    let result = `${currentClass} ${triggerId}`;
    return isBlank(result) ? null : result;
  }),

  fireChangeEvent(){
    (this.get('onSelectionChanged') || function(){})(this.get('_selected'));
  },

  fireOptionAddedEvent(newOption){
    (this.get('onOptionAdded') || function(){})(this.get('_options'), newOption);
  },

  actions: {
    handleKeyPress(select, e) {
      if (select.isOpen === true) {
        let searchText = select.searchText;
        if (isTypingFinished(e) && isTextSuitable(select)) {

          let result = this.get('_options').filter(function(item) {
            return item.toUpperCase() === searchText.toUpperCase();
          });

          if (isBlank(result)) {
            this.get('_options').pushObject(searchText);
            this.get('_selected').pushObject(searchText);
            this.fireOptionAddedEvent(searchText);
            this.fireChangeEvent();
          }

          select.actions.close();
          return false;//we added a new one, stop selecting from results
        }
      } else {
        select.actions.open();
      }
    },

    onchange(value) {
      this.get('_selected').clear();
      if(!isBlank(value)){
        this.get('_selected').pushObjects(value);
      }
      this.fireChangeEvent();
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  options:['ahmet','emre','yusuf'],
  selecteds:['ahmet'],
  
  actions:{
   onchange(val){
    console.log(val); 
   }
  }
});

templates.application.hbs

{{my-tag options=options selected=selecteds triggerId="x" 
        onSelectionChanged=(action (mut selecteds)) onOptionAdded=(action (mut options)) }}
        

templates.components.my-tag.hbs

{{#power-select-multiple
    options=options
    selected=_selected
    onchange=(action 'onchange')
    renderInPlace=true
    onkeydown=(action "handleKeyPress")
    disabled=disabled
    placeholder=_placeholder
    searchEnabled=searchEnabled
    searchPlaceholder=searchPlaceholder
    loadingMessage=loadingMessage
    noMatchesMessage=noMatchesMessage
    searchMessage=searchMessage
    selectedComponent=selectedComponent
    optionsComponent=optionsComponent
    matcher=matcher
    searchField=_searchField
    renderInPlace=renderInPlace
    search=search
    dropdownPosition=dropdownPosition
    closeOnSelect=closeOnSelect
    triggerClass=_triggerClass as |item|}}
  {{#if hasBlock}}
    {{yield item}}
  {{else}}
    {{item}}
  {{/if}}
{{/power-select-multiple}}

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"
  },
  "addons": {
    "ember-power-select": "1.6.1"
  }
}