New Twiddle

components.search-input.js

import Ember from 'ember';

export default Ember.Component.extend();

controllers.application.js

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

const { computed } = Ember;

const STATES = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","NewHampshire","NewJersey","NewMexico","NewYork","NorthCarolina","NorthDakota","Ohio","Oklahoma","Oregon","Pennsylvania","RhodeIsland","SouthCarolina","SouthDakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","WestVirginia","Wisconsin","Wyoming"];

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  searchableItems: computed(function() {
    return STATES;
  }),
  
  searchTask: task(function* (term) {
    this.set('searchTerm', term);
    yield timeout(250);
    
    let items = this.get('searchableItems');
    
    let regexp = new RegExp(term, 'i');
    
    let results = items.filter((el, i, a) => {
      return el.match(regexp);
    });
    this.set('results', results);
  }).restartable(),
  
  resultsToDisplay: computed('results.[]', 'searchableItems.[]', 'searchTerm', function() {
    let {results, searchableItems, searchTerm} = this.getProperties('results', 'searchableItems', 'searchTerm');
    
    if (!searchTerm) {
      return searchableItems;
    }
    
    // this should be filtered by selectedItems as well
    // best would be to use ember-lodash for that
    return results;
  }),
  
  selectedItems: computed(function() {
    return [];
  }),
  
  actions: {
    select(item) {
      this.get('selectedItems').pushObject(item);
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#search-input searchTask=searchTask as |search|}}
	<div>Selected Items:</div>
  {{#each selectedItems as |item|}}
    {{item}}
  {{/each}}
	<ul>
  {{#each resultsToDisplay as |item|}}
    <li {{action 'select' item}}>{{item}}</li>
  {{/each}}
  </ul>
  <div>Task is running: {{search.isRunning}}</div>
{{/search-input}}
<br>
<br>

templates.components.search-input.hbs

<input value={{searchTerm}} oninput={{perform searchTask value="target.value"}}>
{{yield (hash isRunning=searchTask.isRunning)}}

twiddle.json

{
  "version": "0.11.0",
  "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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {
    "ember-concurrency": "0.7.19"
  }
}