javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(searchbar): debounce input events

Browse Source 
Closes #5429
This commit is contained in:
Adam Bradley
2016-03-04 14:56:42 -06:00
parent 6b93bc10fd
commit f6af807688
2 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ionic/components/searchbar/searchbar.ts
View File

@ -5,7 +5,7 @@ import {Ion} from '../ion';
import {Config} from '../../config/config'; import {Config} from '../../config/config';
import {Icon} from '../icon/icon'; import {Icon} from '../icon/icon';
import {Button} from '../button/button'; import {Button} from '../button/button';
import {isDefined} from '../../util/util'; import {isDefined, debounce} from '../../util/util';
/** /**
@ -20,14 +20,12 @@ export class SearchbarInput {
* @private * @private
* Don't send the input's input event * Don't send the input's input event
*/ */
private stopInput(event) { private stopInput(ev) {
event.preventDefault(); ev.preventDefault();
event.stopPropagation(); ev.stopPropagation();
} }
constructor(private _elementRef: ElementRef) { constructor(private _elementRef: ElementRef) {}
}
} }
@ -69,6 +67,8 @@ export class SearchbarInput {
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput] directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]
}) })
export class Searchbar extends Ion { export class Searchbar extends Ion {
private _tmr: number;
/** /**
* @private * @private
*/ */
@ -84,6 +84,11 @@ export class Searchbar extends Ion {
*/ */
@Input() hideCancelButton: any; @Input() hideCancelButton: any;
/**
* @input {number} How long, in milliseconds, to wait to trigger the `input` event after each keystroke. Default `250`.
*/
@Input() debounce: number = 250;
/** /**
* @input {string} Sets input placeholder to the value passed in * @input {string} Sets input placeholder to the value passed in
*/ */
@ -253,9 +258,14 @@ export class Searchbar extends Ion {
* Update the Searchbar input value when the input changes * Update the Searchbar input value when the input changes
*/ */
inputChanged(ev) { inputChanged(ev) {
this.value = ev.target.value; let value = ev.target.value;
this.onChange(this.value);
this.input.emit(this); clearTimeout(this._tmr);
this._tmr = setTimeout(() => {
this.value = value;
this.onChange(value);
this.input.emit(this);
}, Math.round(this.debounce));
} }
/** /**

2
ionic/components/searchbar/test/floating/main.html
View File

@ -1,6 +1,6 @@
<ion-content> <ion-content>
<h5 padding-left> Search - Default </h5> <h5 padding-left> Search - Default </h5>
<ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar> <ion-searchbar [(ngModel)]="defaultSearch" debounce="500" (input)="triggerInput($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
<p padding-left> <p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b> defaultSearch: <b>{{ defaultSearch }}</b>