CODEWITHSUNDEEP
ionic4
qing
qing

Reputation: 885

How to solve duplicate output by using search bar in ionic 4

I am using ionic 4. I want to do search function in my apps. I am using search bar and get the result from API.

My problem is it always output duplicate result.

One problem is I haven't typing the word finish it already match the result that I want to search, then it will output the result.

Another problem is when I finish typing it output again the result.

How can I solved or avoid this problem?

Here is my html code:

<ion-searchbar [(ngModel)]="name" (ionCancel)="onCancel($event)" (ionChange)="Search($event)"></ion-searchbar>

Here is my home.page.ts

Search() {
  this.myService.getSearch(this.name);
 }

Upvotes: 1

Views: 273

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

The second one sounds like you are not wiping the data in your this.myService.getSearch call - check what it does in there, is it starting from a new list or just returning more results? If that doesn't solve that issue then post the code for that section.

The first issue is by design.

You can slow this down with the debounce option:

<ion-searchbar debounce="1500"></ion-searchbar>

There are two input events you can experiment with ionChange and ionInput - they act differently but I cannot remember exactly which does which, you will have to try them both. A third option would be to handle neither of them and just use a submit button.

Upvotes: 1

Related Questions