Basic Search

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  items: [
    { name: 'Apple', count: 2 },
    { name: 'Banana', count: 4 },
    { name: 'Cherry', count: 6 },
    { name: 'Durian', count: 8 },
    { name: 'Elderberry', count: 3 },
    { name: 'Fig', count: 5 },
    { name: 'Grape', count: 7 },
    { name: 'Honeydew', count: 9 },
  ],
  query: '',
  results: Ember.computed('[email protected]', 'query', function() {
    const query = this.get('query').toLowerCase();
    return this.get('items').filter(item => item.name.toLowerCase().includes(query));
  })
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{input value=query placeholder="Search"}}
<ul>
  {{#each results as |item|}}
    <li>{{item.name}} ({{item.count}})</li>
  {{/each}}
</ul>

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"
  }
}