CODEWITHSUNDEEP
angularionic-framework
user6579134
user6579134

Reputation: 839

set debounce in ionic searchbox with angular not working

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);
    });
  }

}

Upvotes: 2

Views: 2228

Answers (1)

Korfoo
Korfoo

Reputation: 611

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

Upvotes: 8

Related Questions