Multi text search with angular material table

Question

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 *

Answer 1

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!)