How to get input from ion-searchbar? - ionic-framework

Question

It is super easy problem but I just can't seem to figure this out (And yes I have read the documentation).
I am trying to get the input user puts in the ion-searchbar (in Ionic v4) after they the press search and put in a const/let.
Mah HTML
<ion-searchbar showCancelButton="focus" class=""></ion-searchbar>
I don't know how I should write the TS for this.
Thanks in advance :{)

Answer 1

Use (search) event to call your function. This event is fired when the user will click on the search button provided by the ion-searchbar.
To get the value entered in the searchbar, use $event.target.value which gets the value field of the tag which in this case is <ion-searchbar>
<ion-searchbar
showCancelButton
searchIcon="search"
animated
cancel-button-icon
(ionCancel)="hideSearch()"
(search)="yourSearchFunction($event.target.value)"
placeholder="Search Some Values">
</ion-searchbar>
To listen to changes as user types in the search bar:
<ion-searchbar
...
(ionInput)="yourInputChangeFunction($event.detail.value)">
</ion-searchbar>
Note: On Ionic 6+, (ionInput) strangely emits value on $event.target.value although, their documentation mentions $event.detail

Answer 2

In your .html file:
<ion-searchbar
[(ngModel)]="autocomplete.input"
(ionInput)="updateSearchResults()"
placeholder="Search for a place">
</ion-searchbar>
In your .ts file:
export class LoginPage{
autocomplete: { input: string; };
updateSearchResults() {
console.log(this.autocomplete.input) //search input will display
}
}

Answer 3

Hope this works.
Html file.
<ion-toolbar>
<ion-searchbar
debounce="1000"
(ionChange)="ionChange($event)">
</ion-searchbar>
</ion-toolbar>
ts file
ionChange(event) {
console.log(event.detail.value)
}

Answer 4

Always Read Documentation of API, Plugins or anything which you are looking for.
You will get data by using ionChange() or ionInput().
Use following code in HTML file
<ion-searchbar
showCancelButton="focus"
ionInput="getData()"
class="">
</ion-searchbar>
and in TypeScript.
public getData(){
//ur logic here
}

Answer 5

Get a reference to the searchbar using the #ViewChild directive:
View:
<ion-searchbar #search></ion-searchbar>
Component:
#ViewChild('search', {static: false}) search: IonSearchbar;
Thereafter, get the value of the ion-searchbar as follows:
const input = await this.search.getInputElement();
const searchValue = input.value;