CODEWITHSUNDEEP
javascripthtmlangulartypescriptionic4
DreadedHippy
DreadedHippy

Reputation: 96

How to get the text input by user in ion searchbar

I am creating an app and I want to get the text the user entered into the search bar after hitting enter and assign that value to a variable. All the examples I have come across only shows list filtering and I am still stuck. I am trying to do this on a one-line code.

<ion-searchbar placeholder="Search" type="text" id="term" ></ion-searchbar>

Upvotes: 1

Views: 1352

Answers (2)

Shashank Vivek
Shashank Vivek

Reputation: 17504

There is nothing much to do, try

<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="searchEventFired()"></ion-searchbar>

to work with enter you need to do:

<ion-searchbar [(ngModel)]="searchTerm" (keydown.enter)="searchEventFired()"></ion-searchbar>

OR

<ion-searchbar [(ngModel)]="searchTerm" (search)="searchEventFired()"></ion-searchbar>

In component.ts


searchTerm = '';

constructor(){}

searchEventFired() {
  // you have the value here
  console.log(this.searchTerm)
}

demo code

Upvotes: 3

sunilbaba
sunilbaba

Reputation: 445

Assuming that search components is your own components not provided by external library.

You can have one keydown event listener and pass event as parameter to the function at your html. Inside that function check for keys pressed and match with keys you wanna check for it.

Upvotes: 0

Related Questions