Ionic2 searchbar very slow for 1000+ items

I have ran the code from https://github.com/driftyco/ionic-preview-app/tree/master/app/pages/searchbars.

I have tested with 1000-2000 items (length on average of 40 characters) . To search for an item is VERY slow . It seems to take about 5 seconds on a low wend android device to see the character show up, then another 10 seconds for the result to filter based on the criteria. 1000 items is not that much, I was wondering if anyone knew how to speed this up (faster algorithm, method, etc)?

I also had problems with this. Performance problem in searchBar but get no answers.

In my case the problems were in an iPhone 6 Plus and with no more than 300 items. I ended up making my own input instead of using searchBar and the performance were very improved.

Searchbar is very easy component. So this issue in your code and in the ngFor of Angular 2. You could improve your code. Try increase a delay to 250ms. You are filtering all array each time, it isn’t look good. From where you get items? You each time transform the string to low case, you really need it?

Hi!,

Could you please share of how your own input worked?

Cheers

Hi!!

I just binded a simple Pipe to an input, like this:

My Input:
<ion-input clearInput type="text" placeholder="Search..." [(ngModel)]="searchQuery"></ion-input>

My ngFor with the pipe:
<button ion-item *ngFor="#contact of contacts | ContactsPipe:searchQuery" class="crazy" ion-chevron-right (click)="goToNewChat(contact)">

My pipe, very simple:

import {Pipe} from ‘angular2/core’;

@Pipe({
  name: 'ContactsPipe'
})
export class ContactsPipe {
  transform(values, args?) {
    let [name] = args;
    if (name === '') return values;
    return values.filter(contact => {
      if (contact.name.formatted.toLowerCase().search(name.toLowerCase()) > -1) {
        return contact;
      }
    })
  }
}

Hope it helps :slight_smile:

1 Like

I had a similiar problem with 12k+ items. I changed the searchBar a little bit and now it works fluently. Here is my code:

getItems(ev: any) {
        // set val to the value of the searchbar
        let val = ev.target.value;

        // if the value is an empty string don't filter the items
        if (val && val.trim() != '' && val.length > 3) {

            this.initializeItems();
            this.items = this.items.filter((item) => {
                return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        } else {
            this.items = [];
        }
    }

As you can see I changed the position of this.initializeItems(); and added && val.length > 3 to the if statement so that the items will only be filtered if the user input is longer then 3 chars. And I dont call this.initializeItems() in the constructor. In my app people should now what to type in there anyways.

You probably already fixed it somehow yourself but maybe this helps someone :smiley: