2

I'm trying to let users make a search to the database to pull results by searching in a textbox and I don't want the API to be called whenever a variable is inserted in the textbox but wait for 3 seconds before the call is made to the API. I'm using debounce but it's not working

<ion-searchbar
[(ngModel)]="userSearch"
          [debounce]="4000"
           (ionInput)="liveSearch($event)"
           placeholder="Search for Politics, Entertainment, Sports..."
></ion-searchbar>

JS

import { Component } from '@angular/core';
import { NewsService } from '../services/news-service.service';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  userSearch: any;
  searchResults: any= [];

  constructor(private newsService: NewsService) {}

  liveSearch() {
    this.newsService.searchNews(this.userSearch).subscribe(data => {
      this.searchResults = data;
      console.log(data);
    });
  }

}

1 Answer 1

6

You should change (ionInput)="liveSearch($event)" to (ionChange)="liveSearch($event)", since the debounce property only changes the ionChange behaviour.

1
  • 2
    Important: With Ionic 7 (er even earlier) this isn't correct anymore and might significantly change what you would expect from the ion-searchbar. See the documentation: "The ionChange event is fired for <ion-searchbar> elements when the user modifies the element's value. Unlike the ionInput event, the onChange event is not necessarily fired for each alteration to an element's value."
    – Manuel
    Jun 18 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.