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

feat(searchbar): add debounce support

Browse Source
This commit is contained in:
mhartington
2017-12-05 14:54:52 -05:00
parent 4b2e5d32c8
commit a4830bd740
3 changed files with 26 additions and 3119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3100
packages/core/src/components.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

23
packages/core/src/components/searchbar/searchbar.tsx
View File

@ -82,21 +82,6 @@ export class Searchbar {
*/ */
@Prop({ mutable: true }) cancelButtonText: string = 'Cancel'; @Prop({ mutable: true }) cancelButtonText: string = 'Cancel';
// _inputDebouncer: TimeoutDebouncer = new TimeoutDebouncer(0);
// /**
// * @input {number} How long, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
// */
// @Input()
// get debounce(): number {
// return this._debouncer.wait;
// }
// set debounce(val: number) {
// this._debouncer.wait = val;
// this._inputDebouncer.wait = val;
// }
/** /**
* @input {number} Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`. * @input {number} Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
*/ */
@ -171,9 +156,13 @@ export class Searchbar {
*/ */
inputChanged(ev: any) { inputChanged(ev: any) {
this.value = ev.target.value; this.value = ev.target.value;
setTimeout(()=>{
this.ionInput.emit(ev);
}, this.debounce)
// this._inputDebouncer.debounce(() => { // this._inputDebouncer.debounce(() => {
// TODO fix to be inside debounce // // TODO fix to be inside debounce
this.ionInput.emit(ev); // this.ionInput.emit(ev);
// }); // });
} }

22
packages/core/src/components/searchbar/test/basic/index.html
View File

@ -3,12 +3,12 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Searchbar - Basic</title> <title>Searchbar - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script> <script src="/dist/ionic.js"></script>
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page> <ion-page class="ion-page">
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Searchbar - Basic</ion-title> <ion-title>Searchbar - Basic</ion-title>
@ -84,6 +84,17 @@
placeholder="Search"> placeholder="Search">
</ion-searchbar> </ion-searchbar>
<h5 padding-left padding-top> Search - DebounceTime </h5>
<ion-searchbar
autocorrect="on"
show-cancel-button="true"
autocomplete="on"
spellcheck="true"
type="text"
debounce="5000"
placeholder="Check the log">
</ion-searchbar>
<h5 padding-left padding-top> Search - Animated and No Cancel</h5> <h5 padding-left padding-top> Search - Animated and No Cancel</h5>
<ion-searchbar <ion-searchbar
id="dynamicAttr" id="dynamicAttr"
@ -136,6 +147,13 @@
const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true; const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
dynamicProp.spellcheck = propIsSpellcheck; dynamicProp.spellcheck = propIsSpellcheck;
} }
const searchbars = document.querySelectorAll('ion-searchbar')
for(let i=0; i <searchbars.length; i++){
searchbars[i].addEventListener('ionInput', (ev)=>{
console.log(ev);
})
}
</script> </script>
</ion-content> </ion-content>
</ion-page> </ion-page>