ionic search

in page.html

<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"

placeholder="Search {{pdlength}}+ Products"></ion-searchbar>

<div *ngFor="let prod of items">

<ion-item>

<ion-grid>

<ion-row>

<ion-col>

<p style="color:black">{{prod.Name}}</p>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-thumbnail item-start>

<img style="margin-top:18px;"
src="http://45.113.122.70/~np/Everest/public/images/{{prod.Image1}}"
(click)="goToProdDescription(prod.Id)" imageViewer />

</ion-thumbnail>

</ion-col>

<ion-col class="colrighttest">

<p>

<b style="color:#008ae6">Price</b>:{{prod.MRP}}</p>

<p *ngIf="prod.OfferPrice != null">

<b style="color:#008ae6">Offer Price</b>:{{prod.OfferPrice}}</p>

<button ion-button color="carcarep" item-end

(click)="addToCart(prod)">Add to cart</button>

</ion-col>

</ion-row>

</ion-grid>

</ion-item>

</div>

page.ts

ngOnInit() {

// start cart count

this.productAddedTocart=this.callsProvider.getProductFromCart();

this.cartItemCount=this.productAddedTocart.length;

this.sharedProvider.updateCartCount(this.cartItemCount);

this.sharedProvider.

currentMessage.subscribe(msg => this.cartItemCount = msg);

// end cart count

debugger;

this.shopbydata=this.navParams.get("shopbycatogery");

debugger;

console.log(this.shopbydata);

this.shopbydataone=this.shopbydata[1];

this.items=this.shopbydata[1];

console.log(this.shopbydataone);

console.log("bhavani");

console.log(this.shopbydataone.length);

console.log("bhavani");

this.pdlength = this.shopbydataone.length;

console.log(this.pdlength);

this.dataService2.getplist(this.items);

this.categoryname = this.shopbydataone[0].Category;

}

public ionViewWillEnter () {

this.setFilteredItems();

}

setFilteredItems() {

this.items = this.dataService2.filterItems(this.searchTerm);

console.log(this.items);

}

in providers create one folder in that

data.ts

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

/*

Generated class for the DatacatprodProvider provider.

See https://angular.io/guide/dependency-injection
for more info on providers

and Angular DI.

*/

@Injectable()

export class DatacatprodProvider {

items:{Id:any,Name:any}[]=[];

Name:any;

constructor(public http: HttpClient) {

console.log('Hello DataProvider Provider');

}

getplist(list:any){

this.items=[];

list.map(data=>{

this.items.push(data);

});

}

filterItems(searchTerm){

return this.items.filter((item) => {

return item.Name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;

});

}

}

reference:

https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/