sq-field-input-searchable additive

components.my-component.js

import Ember from 'ember';

function wrap(options) {
  return options.map(value => ({ value }));
}

export default Ember.Component.extend({
  allowNew: false,
  
  _filter: null,
  _internalOptions: null,
  
  didReceiveAttrs() {
  	this.set('_internalOptions', wrap(this.get('options')));
  
    const filter = this.get('_filter');
    const isEditing = this.get('isEditing');
    
    if (!isEditing) {
      this.set('_filter', this.get('value'));
    }
  },
  
  focusIn() {
    this.set('isEditing', true);
  },
  
  focusOut() {
    this.set('isEditing', false);
  },

  input(event) {
    const value = event.target.value;
    this.set('_filter', value);
    
    if (this.filterChanged) {
      this.sendAction('filterChanged', value);
      
    } else {
      let filtered = this.get('options').slice();
      if (value && value.length) {
        filtered = filtered.filter(v => v.startsWith(value));
        if (this.get('allowNew')) {
        	filtered = [{ value, isNew: true }, ...wrap(filtered)];
        }
      } else {
        filtered = wrap(filtered);
      }
      this.set('_internalOptions', filtered);
    }
  }
});

controllers.application.js

import Ember from 'ember';

const colors = 'red orange yellow green blue indigo violet'.w();

export default Ember.Controller.extend({
  colors: Ember.computed(function() {
    return colors;
  }),
  
  options: Ember.computed(function() {
    return colors.slice();
  }),
  
  value: 'orange',
  
  actions: {
    valueChanged(value) {
      this.set('value', value);
    },
    
    filterChanged(value) {
      let options = colors.filter(v => v.startsWith(value));

      if (value && value.length && !colors.includes(value)) {
        options = [value, ...options];
      }
      
      this.set('options', options);
    }
  }
});

helpers.contains.js

import Ember from 'ember';

export function contains([needle, haystack]) {
  return haystack.includes(needle);
}

export default Ember.Helper.helper(contains);

templates.application.hbs

Current value: {{value}}

{{#my-component options=options 
								value=value 
								valueChanged=(action "valueChanged") 
                filterChanged=(action "filterChanged") as |option|}}
	{{#if (contains option colors)}}
  	{{option}}
  {{else}}
  	Create new "{{option}}"
  {{/if}}
{{/my-component}}

<hr>

{{#my-component options=options 
								value=value 
                allowNew=true
								valueChanged=(action "valueChanged") as |option isAdditive|}}
	{{#if isAdditive}}
    Create new "{{option}}"
  {{else}}
  	{{option}}
  {{/if}}
{{/my-component}}

templates.components.my-component.hbs

<input value={{_filter}} />

{{#each _internalOptions as |option|}}
  <div onclick={{action valueChanged option.value}}>
  	{{yield option.value option.isNew}}
  </div>
{{/each}}

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-data": "2.12.1"
  }
}