How do I implement a search box?

Question

This is what I have so far. The search input field is rendered in the hbs template fine. But the moment I start typing into it, nothing happens. What am I missing? Any pointers would be appreciated.

// ui/app/routes/application.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      orders: this.store.find('order'),
      products: this.store.find('product', { status: 'available' })
    });
  },
});

// ui/app/controllers/application.js
import Ember from 'ember';

export default Ember.ObjectController.extend({
  products: function() {
    console.log('adf');
    if (this.get('search')) {
      return this.get('searchedProducts');
    } else {
      return this.get('products');
    }
  }.property('search', 'searchedProducts'),

  searchedProducts: function() {
    var search = this.get('products').toLowerCase();

    return this.filter(function(product) {
      return product.get('name').toLowerCase().indexOf(search) !== -1;
    });
  }.property('search', 'products.@each.name'),
});


// ui/app/templates/application.js
<br />{{input type="text" value="search" placeholder="search" class="search"}}

{{outlet}}

Answer 1

{{input type="text" value="search" placeholder="search" class="search"}}

means that you are assigning a string value 'search' to some textfield. That is NOT what you want. What you want is to bind a search property to what gets typed into the textfield as follows:

{{input type="text" value=search placeholder="search" class="search"}}

See the difference?