如何实现UI对象列表字段模糊搜索？现有精确匹配代码求助

首先看你当前代码的核心问题：你写的this.filters.searchBy.includes(r.name)是在检查搜索输入是否包含在name字段里，这和你想要的「name字段包含搜索输入」逻辑完全反过来了，而且没处理大小写问题，所以输入小写的tera匹配不到大写的TERA。

下面是优化后的代码，我会同步说明关键改动点：

优化后的完整代码 #

searchInputChanged(input) {
  this.filters.searchBy = input.trim(); // 先去除输入的首尾空格，避免无效搜索
  this.loading = true;
  this.allItems = this.filter();
}

filter() {
  const result = JSON.parse(JSON.stringify(this.fallBackItems));
  // 提前处理搜索词：转小写+空值兜底，避免循环里重复计算
  const searchTerm = this.filters.searchBy?.toLowerCase() || '';

  // 只有搜索词非空时才执行过滤逻辑
  if (searchTerm.length) {
    Object.keys(result).forEach(key => {
      result[key] = result[key].filter(r => {
        // 对name字段做不区分大小写的模糊匹配
        const nameMatches = r.name?.toLowerCase().includes(searchTerm);
        // 如果id也需要模糊搜索就保留这行，否则可以直接删掉
        const idMatches = r.id?.toString().toLowerCase().includes(searchTerm);
        
        return nameMatches || idMatches;
      });
    });
  }

  this.loading = false;
  return result;
}

关键改动说明 #

• 修正匹配逻辑方向：把this.filters.searchBy.includes(r.name)改成r.name.toLowerCase().includes(searchTerm)，这才是真正检查「name字段是否包含用户输入内容」的逻辑。
• 忽略大小写匹配：将搜索词和目标字段都统一转成小写，这样用户输入tera、Tera或TERA都能匹配到THE TERA COMPANY。
• 空值与异常防护：用?.可选链操作符避免字段不存在时报错（比如某条数据没有name或id字段），同时给searchTerm做了空值兜底。
• 小细节优化：在输入处理时增加trim()，避免用户不小心输入首尾空格导致搜索失效；提前处理搜索词，避免在循环中重复执行转小写操作。

如果你的id字段是数字类型，记得用toString()转成字符串再做匹配，不然includes无法正确处理数字与字符串的匹配逻辑。

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