feat: Debouncing of Searchbar

[vswarte]

Type: feat

Ionic Version: 2.x

Platform: mobile webview

I've not seen debouncing described in the docs. So I'm just assuming this isn't implemented yet.

I'm currently making a bunch of API call's using the ion-searchbar as the input for a search query. But firing a call everytime someone is correcting their input is madness. Implementing this myself is rather cumbersome, and I'd love to see some opinionated way of debouncing "custom" inputs.

[alexbainbridge]

In researching the same thing, I found this https://manuel-rauber.com/2015/12/31/debouncing-angular-2-input-component/
Would be great to have built in somehow...

[alexbainbridge]

@BetaBugish Think that that is V1, but not sure!

[jgw96]

@BetaBugish you could use RxJS debounce() and throttle()?

[abierbaum]

@alexbainbridge @BetaBugish You can use ngFormControl to do this the same way you would in a standard ng2 application.

Something along these lines should work:

import {Page} from 'ionic-framework/ionic';
import {Control} from 'angular2/common';

@Page({
   template: `
  <ion-content>
  <ion-searchbar  [ngFormControl]="searchControl"> </ion-searchbar>
</ion-content>
`
})
export class MyPage {
   searchControl: Control = new Control('');

   ngOnInit() {
      this.searchControl.valueChanges
            .debounceTime(500)
            .subscribe((term: string) => console.log('term: ' + term));
   }
}

[brandyscarney]

Moving to beta.3, will discuss with the Angular team tomorrow.

[adamdbradley]

Added a debounce property that defaults to 250ms. Thanks everyone.