Ionic search filter

@champion007 wrote:

Hi ,

I am looking to build a search for the array list, below is the code used.
The search should be based on po_no used in *ngFor of ion-card, it should only show me the result for po_no search text entered into ion-searchbar if does not match it should hide that ion-card.

<ion-searchbar (ionInput)="filterResult($event)"></ion-searchbar>

<ion-card (click)="orderDetails(p)" *ngFor="let p of posts">
    <ion-card-content>
      <h1 color="primary">{{p.po_no}}</h1>
      <ion-buttons class="arrow-forward">
        <ion-button style="height: 18px;" color="secondary">
          <ion-icon name='arrow-forward'></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-label>{{p.reference_no}}</ion-label>
      <h2>{{p.invoice_amount}}</h2>
    </ion-card-content>
</ion-card>

async filterResult(event) {
    const searchText = event.target.value.toLowerCase();
    requestAnimationFrame(() => {
      this.posts.forEach((element, index) => {
        const shouldShow = element.po_no.toLowerCase().indexOf(searchText) > -1;
        element[index].style.display = shouldShow ? 'block' : 'none';
      });
    });
}

Posts: 1

Participants: 1

Read full topic