CODEWITHSUNDEEP
angularhtml-tableangular-material
user2281858
user2281858

Reputation: 1997

Multi text search with angular material table

The search currently works fine. But I have a specific requirement for search.

STACKBLITZ

Lets say I need to search the first row Hydrogen Lithium, the user should be able to enter the following:

*Hy*Li and I should get the output Hydrogen Lithium

How do I achive this? I need break the * into an array and derive my search based on all the search items after splitting the *

Upvotes: 3

Views: 685

Answers (1)

Matt Saunders
Matt Saunders

Reputation: 4074

You will need to modify the filter predicate of your datasource.

Example forked from your Stackblitz and based on your search requirements here.

Specifically:

constructor(private dialog: MatDialog) {
    this.dataSource.filterPredicate =
        (data: Element, filter: string) => {
            const searchArray = filter.split("*");
            let filterMatch = true;
            let prevIndex = 0;
            searchArray.forEach(subString => {
                const strIndex = data.name.toLowerCase().indexOf(subString.toLowerCase());
                if (strIndex === -1 || strIndex < prevIndex) {
                    filterMatch = false;
                } else {
                    prevIndex = strIndex;
                }
            });
            return filterMatch;
        };
}

(Apologies this is quite verbose - will review when I get a moment!)

Upvotes: 2

Related Questions