CODEWITHSUNDEEP
searchember.jsfrontenddebouncing
NewbieLad
NewbieLad

Reputation: 51

Debouncing ember search input

I want to add debounce to my search input in ember app. I'm having problems with using debounce method.

Here's how my search looks like:

{{input type="search"
         placeholder="Search by XYZ"
         value=search
         id="search"
}}

My route file:

export default Ember.Route.extend({
    queryParams: {
    search:{refreshModel: true}
}

My controller file:

export default Ember.Controller.extend({
    search: "",

Upvotes: 4

Views: 3366

Answers (2)

Harsh Rohila
Harsh Rohila

Reputation: 460

search: computed('', {
  set(key, value) {
    debounce(this, this.setValue, value, 500);
  }
})

This worked for me, looks like this overrides the default setter for search.

Upvotes: 0

Ember Freak
Ember Freak

Reputation: 12872

Implementing your desired behaviour debouncing with existing input helper is quite difficult since it will update value immediately.

  1. So I will encourage you to use normal input html element and use keyUp event to listen and manually set value inside debounce method.

Inside controller,

import Ember from 'ember';
export default Ember.Controller.extend({
  queryParams:['easyFilter'],
  easyFilter:'',
  setEasyFilterLazily(value){
    this.set('easyFilter',value);
  },
  actions:{    
     handleEasyFilterEntry(value){   
      Ember.run.debounce(this, this.setEasyFilterLazily,value, 500);
    }
  }
});

Created twiddle for demonstration.

  1. One more interesting options are using ember-concurrency addon. Need to use perform helper instead of action helper,

<input type="text" value={{filterValue}} oninput={{perform triggerToUpdateFilter value='target.value'}}>

and 

triggerToUpdateFilter: task(function*(value) {
  yield timeout(1000); //here it will wait for 1000 ms before setting
  this.set('easyFilter',value);
}).restartable(),

As this task is restartable so it will restart when you type fast within 1000 ms.

Upvotes: 5

Related Questions