Ionic - ion-searchbar - searching only when enter is pressed?

Ionic Framework ionic-v3
#1

I have following piece of HTML code in Ionic 2 app:

<ion-searchbar [(ngModel)]="searchQuery" (input)="searchGIFs()" placeholder="Search"></ion-searchbar>

then i have my JS code:

searchGIFs() {
this.giphy.search(this.searchQuery).then(data => {
    this.gifs = data;
});

Right now SearchGIFs function is executed on each key press into the search field, but I’d like it to execute only when user finishes typing the query and presses “Enter”.

How do I do that?

#2

I’m using it like this

<ion-searchbar [(ngModel)]="searchQuery" (change)="search($event)" autocorrect="off"></ion-searchbar>

so in your case replace search() call with searchGIFs().

4 Likes
#3

Listen to the search event, like this:

<ion-searchbar [(ng-model)]="queryText" placeholder="Sök" (search)="searchByKeyword($event)"></ion-searchbar>

It will only be triggered when the user presses enter.

4 Likes
#4

Thanks for the help,
I have tried (search) instead of (input) and it’s working as expected

#5

(search) works for me as well. Are you guys noticing that if you type a bit fast some characters get skipped ? @wlangiewicz

#6

I have seen this happening when working with (input) - in this case my function wasn’t fired for every character - some were skipped.

#7

I opened a ticket for this https://github.com/driftyco/ionic/issues/5942 . I’m only using (search) which I thought would only triggers when I hit enter.

#8

I have this problem. Solution?

#9

What version of ionic are you using ?

#10

ionic 2.
tks for reply!

I solved my problem!

#11

I use:

<ion-searchbar [(ngModel)]="myInput" (ionInput)="onInput($event)"></ion-searchbar>

which calls the onInput function when I type, but I only need t to fire when ENTER is pressed.

When I try search instead of ionInput, it does not call the onInput function.

<ion-searchbar [(ngModel)]="myInput" (search)="onInput($event)"></ion-searchbar>

How are you guys getting search to work for ENTER?

I am using Ionic 2.0.0-beta.32

Thanks

#12

You need to bind a keypress

#13

Hi nylex,

Thanks for the quick reply.

Do I use ionInput then? Do I bind the keypress on the $event? Because when I press ENTER from within the search bar, ionInput is not called (but other keys are).

Apologies, I am still new to javascript

When I use the following, ENTER seems to work, but gets the error below:

<ion-searchbar [(ngModel)]="searchQuery" (change)="onInput($event)"></ion-searchbar>

Attempt to use a destroyed view: detectChanges

(I do have changeDetection: ChangeDetectionStrategy.OnPush, in the @Component)

This works perfectly, but only for other keys (not ENTER):

<ion-searchbar [(ngModel)]="searchQuery" (input)="onInput($event)"></ion-searchbar>

#14

Try:
<ion-searchbar [(ngModel)]="searchQuery" [hideCancelButton]="true" [debounce]="250" (change)="onInput()" autocorrect="off"> </ion-searchbar>

For me, it works with “enter” keyboard button !

#15

Thanks murillobarata,

That works on ENTER for me too (change).

I am now getting the following error though. But thanks for your help, progress.

Attempt to use a destroyed view: detectChanges

1 Like
#17

@richardmarais did you find a solution for the Attempt to use a destroyed view? Since RC0 I have the same when I use the search bar in a virtual scroll… Despite the error in the console, everything seems to work ok though.

#18

@abhayastudios, I ended up using:

import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

changeDetection: ChangeDetectionStrategy.OnPush,

this.ref.markForCheck();
1 Like
#19

Hey Richard,

For me with type=“number”, (search) event is not getting fired.

Any solution?

#21

The best answer!!! TY! :wink:

#22

Thanks
(change)=“openSearch($event)” is working well for me. This is working only on ENTER Key
<ion-searchbar class=“search” [(ngModel)]=“search” placeholder=“Search for lawyer” (change)=“openSearch($event)”>

1 Like