I am using ion-search bar . Searching is very slow when i am searching the products from the database because the array made from the database is big i am unable to handle this .
here is my code what i am using
//Html
<button ion-button icon-only (click)=“openSearchbar()”>
<ion-searchbar *ngIf=“isOpenSearchbar” class=“navMore” #searchBar [showCancelButton]=“true” [animated]=“true”
(ionInput)=“searchProduct($event)” (ionCancel)=“searchCancel($event)”>
tsfile
fetch function used to fetch the products from database and put the list in products array
fetchProductsFromDB() {
console.log(‘Start fetching from database’);
this.sqlite.create({
name: ‘mkauto.db’,
location: ‘default’
}).then((db: SQLiteObject) => {
db.executeSql(“SELECT * FROM products”, {})
.then((data) => {
this.products = [];
if (data.rows.length > 0) {
for (let i = 0; i < data.rows.length; i++) {
this.products.push({
sku_desc: data.rows.item(i).sku_desc,
product: data.rows.item(i).product,
brand: data.rows.item(i).brand,
for_model: data.rows.item(i).for_model,
mrp: data.rows.item(i).mrp,
part_code: data.rows.item(i).part_code,
});
}
}
console.log("Data from products", this.products);
this.searchproducts = this.products;
console.log("Search Product list", this.searchproducts);
})
.catch(e => { });
}).catch(e => { });
}
//Search function
searchProduct(ev) {
try {
let value = “”;
if (ev.target.value) {
value = ev.target.value.trim();
console.log(“Value is”, value);
this.products = this.products.filter(function (product) {
return (product.product.toLowerCase().indexOf(value.toLowerCase()) > -1)
|| (product.product.indexOf(value) > -1)
|| (product.part_code.toLowerCase().indexOf(value.toLowerCase()) > -1)
|| (product.part_code.indexOf(value) > -1)
});
}
if (value === “”) {
this.products = this.searchproducts;
} else {
this.products = this.products.filter(function (product) {
return (product.product.toLowerCase().indexOf(value.toLowerCase()) > -1)
|| (product.product.indexOf(value) > -1)
|| (product.part_code.toLowerCase().indexOf(value.toLowerCase()) > -1)
|| (product.part_code.indexOf(value) > -1)
});
}
} catch (e) {
console.log(e);
}
}
searchCancel($event) {
console.log("Inside cancel event");
this.products = this.searchproducts;
this.isOpenSearchbar = false;
this.viewctrl.showBackButton(true);
}
openSearchbar() {
console.log("Insode open searchbar event");
this.isOpenSearchbar = true;
this.viewctrl.showBackButton(false);
setTimeout(() => {
this.myInput.setFocus();
}, 100);
}
I am searching the products with product name
I just want to know how i make searching fast in ionic 3