Reputation: 163
In my code, I have a search bar and I'm trying filter elements of a list according to what I have written. The filter works fine if I search the element in an order. For example, if I search 'red blue yellow'
like 'red blue'
but, I want the filter work when I search it as 'red yellow'
too. Here is my code, what should I add to achieve what I want?
HTML:
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
TS:
dataSource: MatTableDataSource<IProduct>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
filterPredicate(data: IProduct, filter: string) {
let fullText = "";
fullText += data.StockIntegrationCode;
fullText += data.ProductGroup ? data.ProductGroup.GroupName : "";
fullText += data.ProductCategory
? data.ProductCategory.CategoryName
: "";
fullText += data.ProductName;
fullText += data.Description;
fullText += data.UnitType ? data.UnitType.Name : "";
fullText += data.IsActive ? "Aktif" : "Taslak";
return (fullText as any).toLocaleLowerCase("tr").indexOf(filter) >= 0;
}
applyFilter(filterValue: string) {
if (this.dataSource) {
this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
Upvotes: 0
Views: 111
Reputation: 57981
Imagine you can use
fullText=fullText.loLocaleLowerCase("tr")
return filter.split(' ').filter(x=>(fullText.indexOf(x)<0)).length==0
That, split your "filter", then you has, e.g. ["red","yellow"] and filter the array only the elements that it's NOT in the fullText.
If there're none (length==0) is because all are in the fulltext.
NOTE: I write the fullText=fullText.loLocaleLowerCase("tr") to not repeat for each "word" in your filter.
Upvotes: 1