使用多个输入通过javascript根据关键字过滤div

Question

我正在尝试为服务计划创建一个过滤器，其中表单中的输入将数据附加到隐藏字段的值，然后过滤器使用该值来匹配单个计划中隐藏 div 中的关键字。虽然拗口，但看起来应该是基本的。

我的计划有一个隐藏的关键字列表，但有“1user”或“2user”或“gaming”或“streaming”等词。用户可以从下拉列表中选择一定数量的用户，下拉列表中的设备数量，以及一系列具有其他功能的复选框。这最终会使隐藏的输入看起来像这样：

<input id="filter" class="filter-checkbox" 
     type="hidden" value="1user streaming">

或

<input id="filter" class="filter-checkbox" 
     type="hidden" value="2user 2device gaming">

确实有很多组合。然后过滤器应该检查一系列产品，其中包含一个具有“隐藏特征”类的 div，并查看这些单词是否与 div 中的任何单词匹配。

<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>

基本上，如果您在下拉列表中选择 1user，则两个 singleplan div 都会显示，如果您在下拉列表中选择 2user，则仅显示第二个。如果您选择流媒体和 2user，它们都会显示，因为它们都有这些关键字。

希望这是有道理的。

这是一个 FIDDLE 和我唯一部分工作的 javascript：

document.addEventListener('DOMContentLoaded', function () {
    // Live Search
    var userSelect       = document.getElementById('userSelect');
    var deviceSelect     = document.getElementById('deviceSelect');
    var filterCheckboxes = document.querySelectorAll('.filter-checkbox');
    var filterInput      = document.getElementById('filter');

    // Event listener for any change in inputs
    userSelect  .addEventListener('change', updateFilter);
    deviceSelect.addEventListener('change', updateFilter);
    filterCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', updateFilter);
    });

    function updateFilter() {
    
        // User and device values
        var userValue   = userSelect.value;
        var deviceValue = deviceSelect.value;

        // Combine checkbox values
        var checkboxValues = Array.from(filterCheckboxes)
            .filter(function (checkbox) {
                return checkbox.checked;
            })
            .map(function (checkbox) {
                return checkbox.value;
            })
            .join(' ');

        // Combine userValue, deviceValue, checkbox values, and update the filter input
        var filterValue = userValue + ' ' 
                        + deviceValue + ' ' 
                        + checkboxValues.toLowerCase();
             // Convert to lowercase for case-insensitive comparison

        // Update the hidden #filter input
        filterInput.value = filterValue;
       
        // Loop through the singleplan elements
        document.querySelectorAll('.singleplan').forEach(function (singleplan) {
            var hiddenFeaturesDiv = singleplan.querySelector('.hidden-features');
            var hiddenFeaturesText = hiddenFeaturesDiv.textContent.toLowerCase();

            // Split the comma-separated text into an array of words
            var hiddenFeaturesWords = hiddenFeaturesText.split(',').map(function (word) {
                return word.trim();
            });

            // Check if userValue is present in hiddenFeaturesWords
            var containsUserValue = hiddenFeaturesWords.includes(userValue.toLowerCase());

            // Check if deviceValue is present in hiddenFeaturesWords
            var containsDeviceValue = hiddenFeaturesWords.includes(deviceValue.toLowerCase());

            // Check if any checkbox value is present in hiddenFeaturesWords
            var containsCheckboxValue = Array.from(filterCheckboxes).some(function (checkbox) {
                var checkboxValue = checkbox.value.toLowerCase();
                return hiddenFeaturesWords.includes(checkboxValue);
            });

            // Check if filterValue is empty or contains only spaces
            var isEmptyFilter = filterValue.trim() === '';

            // If checkbox value is present or filterValue is empty, show the list item; otherwise, hide it
            if (containsUserValue 
              || containsDeviceValue 
              || containsCheckboxValue 
              || isEmptyFilter
              ) {
                singleplan.style.display = 'block';
            } else {
                singleplan.style.display = 'none';
            }
        });

    }

    
});

任何人都可以帮我让它工作吗？

Answer 1

我在您的代码中发现了两个问题。

第一：

var hiddenFeaturesWords = hiddenFeaturesText.split(',').map(function (word) {
   return word.trim();
});

您用逗号分隔隐藏功能，期望获得过滤器关键字数组，您在下一行中使用这些过滤器关键字来过滤用户、设备等。但实际文本不是逗号分隔而是空格分隔。所以这应该是：

var hiddenFeaturesWords = hiddenFeaturesText.split(' ').map(function (word) {
    return word.trim();
});

第二：

var containsCheckboxValue = Array.from(filterCheckboxes).some(function (checkbox) {
    var checkboxValue = checkbox.value.toLowerCase();
    return hiddenFeaturesWords.includes(checkboxValue);
});

不是用户选择的复选框，而是迭代所有复选框并检查hiddenFeaturesWords是否包含其中任何一个，这始终为真，因为每个hiddenFeaturesWords都至少包含一个复选框。因此，您应该仅迭代选定的复选框。应该是这样的：

var containsCheckboxValue = Array.from(checkboxValues.split(' ')).some(function (checkbox) {
    var checkboxValue = checkbox.toLowerCase();
    return hiddenFeaturesWords.includes(checkboxValue);
});

这是一个工作的FIDDLE