angular - 使用 Angular Material 表进行多文本搜索

Question

搜索目前运行良好。但我对搜索有特定的要求。

STACKBLITZ

假设我需要搜索第一行氢锂，用户应该能够输入以下内容:

*Hy*Li 我应该得到输出氢锂

我该如何实现这一目标？我需要将 * 分解为 array 并根据拆分 *

后的所有搜索项派生搜索

Answer 1

您需要修改filter predicate您的数据源。

示例来自您的 Stackblitz，并根据您的搜索要求 here .

具体:

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;
        };
}

(抱歉，这太冗长了 - 当我有时间时会回顾!)