Angular+TS搜索功能问题：需实现精确搜索词匹配展示

你的问题核心是用了includes()做模糊匹配，而非精确判断相等。includes()只要目标文本里包含搜索词就会返回true，自然会出现非精确匹配的结果。要实现仅展示完全匹配的结果，把所有includes(searchTerm)替换成严格相等判断=== searchTerm即可，同时保留原代码的大小写统一处理逻辑。

修改后的完整代码： #

search() {
    const searchTerm = this.field.searchTerm.toLowerCase();
    const rows = this.field.rowsToFilter.filter(row => {
      return this.field.columns.some(column => {
        const cell = row[column.name];
        if (column.checkbox) {
          // 精确匹配checkbox的label（统一小写后）
          return cell.label.toLowerCase() === searchTerm;
        }
        if (column.datepicker) {
          // 精确匹配datepicker的data（统一小写后）
          return cell.data.toLowerCase() === searchTerm;
        }
        if (column.select) {
          // 精确匹配select的option（统一小写后）
          return cell.option.toLowerCase() === searchTerm;
        }
        // 普通单元格精确匹配（统一小写后）
        return cell.toLowerCase() === searchTerm;
      });
    });
  
    this.field.rows = rows;
    this.field.total = rows.length;
    this.currentPage = 1;
    // 下面这行无实际作用，直接删除
    // this.field.rowsToFilter.filter( row => this.matches(row, this.field.searchTerm));
  }

关键改动说明： #

• 将所有模糊匹配的includes(searchTerm)替换为=== searchTerm，确保只有单元格内容完全等于搜索词（统一大小写后）才会被筛选出来。
• 移除最后一行无意义的filter调用——它没有将筛选结果赋值给任何变量，对页面数据没有实际影响。

如果需要区分大小写的精确匹配，只需去掉所有.toLowerCase()转换，比如直接用cell.label === searchTerm即可。

内容的提问来源于stack exchange，提问作者RafaaJook