Searchbar - search on 'enter' key

I was able to capture 'Enter' key click or 'search' key click with (search) output event

<ion-searchbar
  (search)="search($event)">
</ion-searchbar>

You should be able to add Angular 2 keyup bindings to elements such as keyup and click

Template:

<ion-searchbar #q
      [showCancelButton]="true"
      (keyup.enter)="search(q.value)">
</ion-searchbar>

Component TS:

search(q: string) { 
    console.log(q); 
}

With Ionic 5 using Angular you have to wrap the ion-searchbar inside a form tag like this:

<form (ngSubmit)="hideKeyboard()">
  <ion-searchbar (ionChange)="search($event)"></ion-searchbar>
</form>

In your component using Capacitor:

import { Plugins } from '@capacitor/core';
const { Keyboard } = Plugins;

...

hideKeyboard() {
  Keyboard.hide();
}

Of course you could use the ngSubmit event to also search and not only hide the keyboard.

Related