Angular 2 ngModel value not updating fast enough using ionic - angularjs

Question

I have a ion-searchbar that looks like this
<ion-searchbar [(ngModel)]="searchQuery" (keyup.enter)="search();"></ion-searchbar>
and the searchQuery is defined in my typescript file like this
export class SearchPage {
searchQuery: string;
constructor(){}
search() {
this.service.search(this.searchQuery).subscribe(
data => this.searchResults = data,
error => {
//something
}, () => {
//something
}
);
}
}
The problem is that if I change the value too fast and I press Enter, the value of searchQuery is not updated. For example, if I search "test" and I wait two seconds it will work. If I then search "testing" and I type it fast and press Enter right away, the value will still be "test". Now, I know this sounds weird, but it is really happening!
Any ideas why the value is not changed as soon as I type something?
Thank you

Answer 1

In Html try this event change
<form [ngFormModel]="searchForm" (ngSubmit)="search()">
<ion-searchbar [(ngModel)]="searchQuery" (keyup)="search()"></ion-searchbar>
<button type="submit" block>Submit</button>
</form>
Even check here might this help
In ts trim the value
this.service.search(this.searchQuery.trim()).subscribe(.....)

Answer 2

This is how I did it, based on the documentation for ion-searchbar:
<ion-searchbar #searchBar [debounce]="50" (ionChange)="search(searchBar.value)">
</ion-searchbar>
and in the TS file:
search(value: string) {
// do something with value
}
Explanation:
It's pretty self-explanatory, but here it is. The #searchBar creates a 'hook' for the element (sort of a 'self', or 'this', but named). We then use the property value from ion-searchbar to pass it to our function. The last thing is modifying the [debounce] property to make it update faster (but it will trigger more times when people write fast - use with discretion).

Answer 3

Something you can do to improve the way the search bar is being handled is:
In your page.html:
<ion-searchbar primary hideCancelButton [(ngModel)] = "searchQuery" [ngFormControl]="searchQueryControl"></ion-searchbar>
And in your page.ts:
// Remember to import these things:
import {FORM_DIRECTIVES, Control} from 'angular2/common';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
constructor ( ... ) {
//...
this.searchQuery = '';
this.searchQueryControl = new Control();
//...
this.searchQueryControl
.valueChanges
.debounceTime(1000)
.distinctUntilChanged()
.subscribe(text => {
if(text !== '') {
this.searchQuery = text;
this.search();
}
});
//...
}
By doing that, we would only run the code when the input has changed (this.searchQueryControl.valueChanges), and when there hasn't been another change within 1 second (.debounceTime(1000)). The distinctUntilChanged() allow us to run the code if the value is different to the last time it ran. So if the user typed 'asd', hit the backspace key and then retyped the ending 'd' again, nothing would happen.