I’m having an issue with search bar .
The list for which search is performed contains 500+ records
and the search is performed on multiple criteria . Whenever the you enter the searchbar to type any text there is lot of lag during the text input and this doesn’t happen in the browser .
This only happens when app is deployed to the device using this command .
ionic cordova run android --prod
Following is the code for it
.ts file
search(ev: any) {
let val = ev.target.value;
if (val == '' || val == undefined) {
// please check this
this.showList = true;
this.peopleDirectories = [];
this.getPeople(this.filters)
}
else {
if (this.peopleDirectoriesClone != undefined) {
this.peopleDirectories = this.peopleDirectoriesClone.filter((peopleDirectories) => {
if (peopleDirectories.FirstName != null) {
if (peopleDirectories.FirstName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.LastName != null) {
if (peopleDirectories.LastName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.DesignationName != null) {
if (peopleDirectories.DesignationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.DepartmentName != null) {
if (peopleDirectories.DepartmentName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.OfficeLocationName != null) {
if (peopleDirectories.OfficeLocationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.Language != null) {
if (peopleDirectories.Language.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.Skills != null) {
if (peopleDirectories.Skills.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
});
}
else {
this.peopleDirectories = this.peopleDirectories.filter((peopleDirectories) => {
if (peopleDirectories.FirstName != null) {
if (peopleDirectories.FirstName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.LastName != null) {
if (peopleDirectories.LastName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.DesignationName != null) {
if (peopleDirectories.DesignationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.DepartmentName != null) {
if (peopleDirectories.DepartmentName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.OfficeLocationName != null) {
if (peopleDirectories.OfficeLocationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.Language != null) {
if (peopleDirectories.Language.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
if (peopleDirectories.Skills != null) {
if (peopleDirectories.Skills.toLowerCase().indexOf(val.toLowerCase()) > -1) {
return peopleDirectories;
}
}
});
}
}
}
**.html file**
<ion-content padding>
<ion-row class="border1 no-scroll ">
<ion-col col-9 class="border2">
<ion-searchbar (ionInput)="search($event)" class="searchbar-padding"></ion-searchbar>
</ion-col>
<ion-col class="filtercss border3">
<button ion-button clear (click)="advancesearch()" class="buttonclass"><ion-icon [name]= filterapplied class="icon icon-ios ion-ios-funnel funnelsize"></ion-icon></button>
</ion-col>
</ion-row>
<!-- <ion-scroll style="width:100%;height:100vh" scrollY="true"> -->
<ion-list *ngIf="showList == true" class="listpadding">
<ion-item #item *ngFor="let people of peopleDirectories" class="removepadding item-content rmvlft-padding">
<ion-grid class="grid-padding">
<ion-row class="bottom-padding">
<ion-col col-3>
<ion-avatar item-start class="item-avatar " (click)="presentPopover($event,people.ImageURL, people.ContactNumber, people.FirstName, people.LastName,people.EmailId)">
<img src="{{people.ThumbURL}}" style="height:65px; width:65px; object-fit:fill; padding:1px;">
</ion-avatar>
</ion-col>
<ion-col col-5 class="lilpadding">
<div (click)="peopleDetails(people.Id)">
<h3 *ngIf="people.FirstName != null" class="h3">{{people.FirstName}} {{people.LastName}}</h3>
<h6 *ngIf="people.DesignationName != null">{{ people.DesignationName }}</h6>
<h6 *ngIf="people.ExternalNumber != null">Extn {{people.ExternalNumber}}</h6>
</div>
</ion-col>
<ion-col col-2 class="morepadding">
<ion-buttons end>
<button ion-button clear class="icon-size" ><ion-icon (click)="callnumber(people.ContactNumber)" name="call"></ion-icon></button>
</ion-buttons>
</ion-col>
<ion-col col-2 style="padding-top: 8px">
<ion-buttons end >
<button ion-button clear class="icon-size" ><ion-icon class="ionbutton" (click)="gonextpage(people.Id)" name="ios-arrow-forward"></ion-icon></button>
</ion-buttons>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="LoadMore($event)" loadingSpinner="bubbles">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<!-- </ion-scroll> -->
</ion-content>
Here is the ionic info
cli packages:
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
@ionic/app-scripts : 3.1.9
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.9.2
System:
Node : v6.11.1
npm : 3.10.10
OS : Windows 10