如何实现JavaScript数组的标题模糊搜索？当前仅支持精确匹配需优化

嘿，我来帮你搞定这个类似表格筛选的模糊搜索需求！原来的精确匹配确实不够灵活，我们只需要调整一下filter里的判断逻辑，就能实现输入任意字符逐步缩小结果范围的效果。

核心思路 #

要实现模糊匹配，关键是忽略大小写并检查标题是否包含搜索关键词的任意部分，这样用户输入"pac"能找到《Pacific Rim》，输入"troop"能找到《Super Troopers 2》，完全符合你要的表格筛选体验。

完整代码示例 #

let movies = [
  {title: "Pacific Rim", year: "2018"},
  {title: "Batman", year:"1984"},
  {title: "Super Troopers 2", year: "2018"}
];

// 假设这是从输入框获取的用户搜索词（实际项目里可以用Vue的v-model、React的useState等绑定）
const searchQuery = "troop";

let filteredMovies = movies.filter(movie => {
  // 处理空搜索的情况：如果用户没输入内容，返回全部电影
  if (!searchQuery.trim()) {
    return true;
  }
  // 统一转成小写，避免大小写差异影响匹配结果
  const normalizedTitle = movie.title.toLowerCase();
  const normalizedQuery = searchQuery.toLowerCase();
  // 检查标题是否包含搜索词
  return normalizedTitle.includes(normalizedQuery);
});

console.log(filteredMovies);
// 输出：[{title: "Super Troopers 2", year: "2018"}]

额外说明 #

• 大小写不敏感：通过toLowerCase()把标题和搜索词都转成小写，保证用户输入"RIM"或"rim"都能匹配到《Pacific Rim》。
• 空输入处理：加入!searchQuery.trim()的判断，确保用户清空输入时能显示全部电影，符合常规筛选逻辑。
• 扩展选项：如果需要更精准的匹配（比如只匹配标题开头），可以把includes()换成startsWith()；如果要匹配结尾，用endsWith()就行。

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