JavaScript卡片多文本搜索功能异常问题咨询

你的问题是搜索匹配逻辑判断错误导致的，完全不需要重写，调整核心匹配代码就能解决。

问题根源分析 #

输入'do'时两个卡片都显示，但输入'doc'时只显示'docker'，说明你的匹配逻辑大概率犯了以下错误之一：

• 匹配方向写反了（比如判断「搜索词包含卡片内容」，而不是「卡片内容包含搜索词」）
• 没有统一大小写，导致大小写差异影响匹配
• 错误使用了开头/结尾匹配的正则，限制了匹配范围

具体修改方案 #

下面是通用的修复代码逻辑，你可以对照现有代码调整：

function search(el) {
  // 处理搜索词：去空格+转小写，避免干扰
  const searchText = el.value.trim().toLowerCase();
  // 获取所有卡片元素
  const cards = document.querySelectorAll('.card');

  cards.forEach(card => {
    // 获取卡片的标题和关键词，统一转小写
    const cardTitle = card.querySelector('.card-title').textContent.trim().toLowerCase();
    // 假设keywords存在于data-keywords属性，或者你自定义的存储位置
    const cardKeywords = (card.dataset.keywords || '').trim().toLowerCase();

    // 核心匹配：标题或关键词包含搜索词就显示
    const isMatched = cardTitle.includes(searchText) || cardKeywords.includes(searchText);
    card.style.display = isMatched ? 'block' : 'none';
  });
}

关键调整点 #

• 统一大小写：把搜索词和卡片内容都转成小写，彻底避免大小写敏感问题
• 正确的匹配方向：判断「卡片内容包含搜索词」，而不是反过来
• 去空格处理：用trim()清除输入和内容的首尾空格，防止空输入或多余空格导致的误判
• 多维度匹配：同时检查标题和keywords，任一维度匹配就显示卡片

如果你的现有代码用了正则表达式，要确保添加i忽略大小写的flag，比如：

const regex = new RegExp(searchText, 'i');
const isMatched = regex.test(cardTitle) || regex.test(cardKeywords);

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