Home > Mobile >  Search bar in Ionic using pipe filter
Search bar in Ionic using pipe filter

Time:10-14

Oops guys, I have the following problem, I made this pipe filter to filter this information, but I needed to filter 2 more pieces of information, but I have no idea how to do this in this pipe. I'll leave the example of the pipe I made below

/*** PIPE ***/

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(nomes: any, search: []): any {

    if (search === undefined) { return nomes }
    return nomes.filter(function(nome){
      Here, I needed to filter, nome?.city, nome?.age
      return nome?.titulo?.includes(search)
    })
  }

}
/*** HTML ***/

<ion-searchbar [(ngModel)]="search" name="search"></ion-searchbar>

CodePudding user response:

Add this code in HTML Page

<ion-searchbar color="light" class="ion-no-padding" [(ngModel)]="searchData" mode="ios"
        [placeholder]="'Search ' pageName">
      </ion-searchbar>

<ion-row *ngFor="let item of checkContent | filterData : ['city','age'] : searchData">
</ion-row>

Add this code in Filter Pipe

transform(items: any[], field: any[], value: string): any[] {
        if (!items || !value || !field) {
          return items;
        }
    
        let lowSearch = value.toLowerCase();
        return items.filter((item) => {
          return field.some(key =>
            String(item[key]).toLowerCase().includes(lowSearch)
          );
        });
      }
  • Related