JavaScript数组模糊搜索实现：匹配关键词返回多个结果对象

原有代码无法实现模糊匹配的核心原因有两个：

• 使用Array.find()方法仅会返回第一个命中的元素，无法获取所有匹配结果
• 使用===做全等校验，仅当输入值和name属性完全一致时才会命中，不支持片段匹配

核心修改逻辑 #

只需要调整两处代码即可实现需求：

1. 将Array.find()替换为Array.filter()，该方法会返回所有符合判断条件的元素组成的数组
2. 将全等判断替换为String.includes()包含判断：统一将元素name值、输入关键词转为小写后，判断name值是否包含关键词片段，即可实现不区分大小写的模糊匹配
   如果需要兼容极低版本JS环境，可以用name.toLowerCase().indexOf(keyword.toLowerCase()) !== -1替代includes判断，效果完全一致

额外增加空关键词判断：当输入框内容为空/只有空格时，直接返回空数组，避免无意义的全量匹配。

修改后完整代码 #

JS代码 #

const elements = [{name: 'apple',color: 'red'},{name: 'apex', color: 'white'},{name: 'bat', color: 'black'}];

const searchElement = (elementsArray,keyword) => {
  // 预处理关键词：去前后空格、转小写
  const processedKeyword = keyword.trim().toLowerCase();
  if (!processedKeyword) return [];
  // 过滤所有name包含关键词的元素
  return elementsArray.filter(element => {
    return element.name.toLowerCase().includes(processedKeyword);
  });
}

document.getElementById('myInput').addEventListener('keyup', () => {
  const keyword = document.getElementById('myInput').value;
  const result = searchElement(elements,keyword);
  console.log(result);
});

HTML代码 #

<input type="text" placeholder="Search" id="myInput">

匹配效果 #

• 输入ap：返回apple、apex两个对应对象
• 输入AT：不区分大小写，返回bat对应对象
• 输入 ap ：自动忽略前后空格，正常返回apple、apex结果
• 输入空内容：返回空数组

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