Bootstrap Gallery多关键词无序搜索/过滤功能优化求助

问题根源 #

你的现有代码将输入的完整字符串作为单一匹配条件，只有当卡片文本完全按顺序包含输入的带逗号字符串时才会匹配，导致关键词顺序变化后无法找到结果。

优化代码实现 #

替换原searchFilter函数为以下代码，实现无序多关键词搜索（只要卡片包含任一输入关键词即显示）：

var searchFilter = () => {
    const input = document.querySelector(".form-control");
    const cards = document.getElementsByClassName("col");
    
    // 处理输入：拆分关键词、去空格、转小写、过滤空值
    const filters = input.value.split(',')
        .map(keyword => keyword.trim().toLowerCase())
        .filter(keyword => keyword.length > 0);

    // 无关键词时显示所有卡片
    if (filters.length === 0) {
        Array.from(cards).forEach(card => card.classList.remove("d-none"));
        return;
    }

    // 遍历卡片检查匹配
    Array.from(cards).forEach(card => {
        const cardText = card.querySelector(".card-body").innerText.toLowerCase();
        // 检查是否包含任意一个关键词
        const isMatch = filters.some(keyword => cardText.includes(keyword));
        card.classList.toggle("d-none", !isMatch);
    });
}

关键修改说明 #

• 关键词拆分与清洗：用split(',')分割输入内容，通过trim()去除关键词前后空格，toLowerCase()统一大小写，filter()过滤空关键词（避免多逗号导致的无效匹配）。
• 无序匹配逻辑：使用Array.some()方法，只要卡片文本包含任一关键词即判定为匹配，彻底摆脱关键词顺序限制。
• 无输入处理：当输入框为空时，直接显示所有卡片，提升用户体验。
• 简化DOM操作：用Array.from()将HTMLCollection转为数组，配合forEach()和classList.toggle()简化显示/隐藏逻辑。

内容的提问来源于stack exchange，提问作者Damian de Villiers