How do I implement a search box?

Refresh

December 2018

Views

1.2k time

2

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', '[email protected]'),
});


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

{{outlet}}

2 answers

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

означает , что вы присваиваете строковое значение 'search'в какое - то текстовое поле. Это не то , что вы хотите. То , что вы хотите, чтобы связать searchсвойство , что получает ввели в текстовое поле следующим образом :

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

Увидеть разницу?

0

Вы уверены , что у вас нет проблем с ключевым словом productsкак - то в сценарии?

products: function() {
    console.log('adf');
    if (this.get('search')) {
      return this.get('searchedProducts');
    } else {
      return this.get('products'); //returns the computed property value itself right ?
    }
  }.property('search', 'searchedProducts'),

this.get('model.products') в обоих «продуктов» вычислен собственности и searchProduct я думаю