如何修改JavaScript列表过滤逻辑 匹配任意关键词而非完整短语

修改思路 #

• 先将输入内容按空格分割为独立关键词，自动过滤空内容，避免连续空格生成无效关键词
• 统一转为大写实现大小写不敏感匹配
• 遍历列表项时判断是否存在至少一个关键词命中内容，满足条件则显示，否则隐藏
• 额外兼容输入为空的场景，此时直接显示所有列表项，符合常规交互逻辑

修改后的完整JS代码 #

function myFunction() {
  var input, filterKeywords, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  // 按任意数量空格分割输入，过滤空值后统一转大写
  filterKeywords = input.value
    .split(/\s+/)
    .filter(keyword => keyword.trim() !== '')
    .map(keyword => keyword.toUpperCase());
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = (a.textContent || a.innerText).toUpperCase();
    // 无关键词时全部显示，有关键词时只要命中任意一个就显示
    const isMatch = filterKeywords.length === 0 || filterKeywords.some(keyword => txtValue.includes(keyword));
    li[i].style.display = isMatch ? "" : "none";
  }
}

效果验证 #

输入Primary home时，会被分割为PRIMARY、HOME两个关键词，只要列表项包含其中任意一个就会显示，你示例中的PRIMARY CARE HOME会正常命中，不会出现无结果的问题。

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