Performance problem in searchBar


#1

Hi guys!! I have developed earlier with ionic v1 and now I’m trying ionic v2. It’s of course a great job!!

I’m running an issue with the searchBar. I have my contact list and I want to filter it searching within the name. I have followed the example of the searchBar documentation but the input in the searchBar is heavy and slow. I have seen in debug session in Xcode (Forgot to mention I’m trying in iOS) there is no problem with CPU or Memory, and in browser is ok, but in emulator and real device is kind of slow.

navigator.contacts.find(['*'], (contacts) => {
  this.contacts = contacts;
}, (error) => {
  console.error(error);
});

I’m just getting like this my contacts and then filtering like in documentation:

getItems(searchbar) {
  // Reset items back to all of the items
  this.initializeItems();

  // set q to the value of the searchbar
  var q = searchbar.value;

  // if the value is an empty string don't filter the items
  if (q.trim() == '') {
    return;
  }

  this.contacts = this.contacts.filter((v) => {
    if (v.name.formatted.toLowerCase().indexOf(q.toLowerCase()) > -1) {
      return true;
    }
    return false;
  })
}

Also, my ngFor is not being rendered until I press again the tab that I’m inside, looks like the “scope” is not being uploaded when I enter the view and get my contacts. Am I doing something wrong?

  <ion-searchbar 
    [(ngModel)]="searchQuery"
    [hideCancelButton]=true
    [debounce]=100
    (input)="getItems($event)"
    class="searchBar">
  </ion-searchbar>
  <ion-list no-lines>
    <ion-item *ngFor="#contact of contacts" class="crazy">
      <span class="crazy">{{contact.name.formatted}}</span>
      <!--<p></p>
      <span class="phone">{{contact.phoneNumbers[0].value}}</span>-->
    </ion-item>
  </ion-list>

Thank you very much in advance!!


Ionic2 searchbar very slow for 1000+ items
#2

Did you fix the Problem?
Could you share your code with us. I have the same problem :frowning:

Thank you.


#3

Kinda! This is my answer in other thread: