求助：基于多输入关键词的JavaScript服务计划Div筛选功能实现

你的过滤器功能失效的核心原因有两个：

1. 隐藏特征关键词拆分错误：原代码用逗号,拆分隐藏内容，但实际你的关键词是用空格分隔的，导致所有关键词被当成一个整体，无法正确匹配。
2. 空过滤条件处理不当：当下拉框选择默认空值时，空字符串会被纳入判断逻辑，导致匹配出错。

另外，原代码的判断逻辑可以进一步优化，直接基于最终生成的过滤值提取有效关键词，统一进行匹配检查，让代码更简洁清晰。

修正后的完整代码 #

HTML部分（保持你的原有结构） #

<!-- 表单控制元素 -->
<select id="userSelect">
  <option value="">选择用户数量</option>
  <option value="1user">1用户</option>
  <option value="2user">2用户</option>
</select>
<select id="deviceSelect">
  <option value="">选择设备数量</option>
  <option value="1device">1设备</option>
  <option value="2device">2设备</option>
</select>
<label><input type="checkbox" class="filter-checkbox" value="gaming"> 游戏</label>
<label><input type="checkbox" class="filter-checkbox" value="streaming"> 流媒体</label>
<input id="filter" class="filter-checkbox" type="hidden" value="">

<!-- 服务计划结构 -->
<div data-box-number="1" class="singleplan plan1">
  <div class="content">
    <p>Plan 1</p>
    <div class="hidden-features" style="display:none;">
       1user streaming
    </div>
  </div>
</div>
<div data-box-number="2" class="singleplan plan2">
  <div class="content">
  <p>Plan 2</p>
  <div class="hidden-features" style="display:none;">
    1user 2user 1device gaming</div>
  </div>
</div>

JavaScript部分 #

document.addEventListener('DOMContentLoaded', function () {
    const userSelect = document.getElementById('userSelect');
    const deviceSelect = document.getElementById('deviceSelect');
    const filterCheckboxes = document.querySelectorAll('.filter-checkbox:not(#filter)');
    const filterInput = document.getElementById('filter');

    // 绑定所有输入控件的变更事件
    userSelect.addEventListener('change', updateFilter);
    deviceSelect.addEventListener('change', updateFilter);
    filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change', updateFilter));

    function updateFilter() {
        // 收集所有非空的过滤关键词
        const filterKeywords = [];
        
        // 添加非空的用户选择值
        if (userSelect.value.trim()) {
            filterKeywords.push(userSelect.value.toLowerCase());
        }
        // 添加非空的设备选择值
        if (deviceSelect.value.trim()) {
            filterKeywords.push(deviceSelect.value.toLowerCase());
        }
        // 添加选中的复选框值
        Array.from(filterCheckboxes)
            .filter(checkbox => checkbox.checked)
            .forEach(checkbox => filterKeywords.push(checkbox.value.toLowerCase()));

        // 更新隐藏输入框的内容
        filterInput.value = filterKeywords.join(' ');

        // 遍历所有服务计划进行匹配
        document.querySelectorAll('.singleplan').forEach(singleplan => {
            const hiddenFeaturesText = singleplan.querySelector('.hidden-features').textContent.toLowerCase();
            // 拆分隐藏特征为关键词数组（处理多空格、首尾空格）
            const planKeywords = hiddenFeaturesText.split(/\s+/).filter(word => word);

            // 判断是否显示当前计划：无过滤条件时全显示，否则匹配任一关键词即显示
            const shouldShow = filterKeywords.length === 0 
                || filterKeywords.some(keyword => planKeywords.includes(keyword));

            singleplan.style.display = shouldShow ? 'block' : 'none';
        });
    }

    // 页面加载时初始化一次，确保初始状态正确
    updateFilter();
});

关键改进点 #

• 正确拆分关键词：使用split(/\s+/)拆分空格分隔的关键词，并用filter(word => word)过滤空字符串，解决首尾空格或多空格的问题。
• 过滤空条件：仅将非空的下拉框值加入过滤数组，避免空字符串干扰匹配逻辑。
• 统一判断逻辑：用filterKeywords.some(...)检查计划是否包含任一过滤关键词，完全符合你的预期需求：
  • 选择1user时，两个计划都包含该关键词，全部显示
  • 选择2user时，仅Plan2包含该关键词，只显示Plan2
  • 同时选择streaming和2user时，Plan1包含streaming、Plan2包含2user，两个计划都显示
• 初始化执行：页面加载时自动执行一次过滤逻辑，确保初始状态正确。

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