New Twiddle

controllers.application.js

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  queryParams: ['query'],
  query: null,
  
  queryField: Ember.computed.oneWay('query'),
  actions: {
    search: function() {
      this.set('query', this.get('queryField'));
    }
  }
});

routes.application.js

var words = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab illum labore quis ipsam voluptate sunt reprehenderit iure nisi sit ut inventore illo porro. Eveniet odio sed corporis distinctio tempore temporibus!".toLowerCase().split(' ');

export default Ember.Route.extend({
  queryParams: {
    query: {
      // Opt into full transition
      refreshModel: true
    }
  },
  
  model: function(params) {
    if (!params.query) {
      return []; // no results;
    }
    
    var regex = new RegExp(params.query);
    return words.filter(function(word) {
      return regex.exec(word);
    });
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1><br><br>

<h3>Ember Query Params: search</h3>
<form {{action "search" on="submit"}}>
  {{input value=queryField}}
  <input type="submit" value="Search"/>
</form>

{{#if query}}
  <p>Displaying results for "{{query}}"</p>

  <ul>
    {{#each model as |result|}}
      <li>{{result}}</li>
    {{/each}}     
  </ul>
{{/if}}