javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 14:58:36 +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';
// _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`.
*/
@ -171,9 +156,13 @@ export class Searchbar {
*/
inputChanged(ev: any) {
this.value = ev.target.value;
// this._inputDebouncer.debounce(() => {
// TODO fix to be inside debounce
setTimeout(()=>{
this.ionInput.emit(ev);
}, this.debounce)
// this._inputDebouncer.debounce(() => {
// // TODO fix to be inside debounce
// this.ionInput.emit(ev);
// });
}

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

@ -3,12 +3,12 @@
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<ion-app>
<ion-page>
<ion-page class="ion-page">
<ion-header>
<ion-toolbar>
<ion-title>Searchbar - Basic</ion-title>
@ -84,6 +84,17 @@
placeholder="Search">
</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>
<ion-searchbar
id="dynamicAttr"
@ -136,6 +147,13 @@
const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
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>
</ion-content>
</ion-page>