JavaScript multi-condition filtering: implement dynamic product filtering based on AND/OR logic

This tutorial introduces in detail how to use JavaScript to implement multi-condition dynamic filtering function, allowing users to filter products based on multiple attributes such as color and size. Through clear HTML structure and JavaScript code examples, the article demonstrates how to flexibly handle AND and OR logic to meet complex user filtering needs and provides optimization suggestions.

introduction

In modern web applications, dynamic filtering is a key component in improving user experience. When users need to filter products or data based on multiple attributes (such as color, size, brand, etc.), how to effectively implement multi-condition filtering and flexibly handle the logical relationships between different filtering conditions (such as "AND" or "OR") has become a common challenge in front-end development. This tutorial will dive into how to build a robust multi-condition filtering system using pure JavaScript, with particular attention to how to dynamically switch AND/OR logic based on the number of filters selected by the user.

Core concepts and data structures

To implement multi-condition filtering, you first need to ensure that the HTML element contains enough metadata for JavaScript to read. In this example, we use the data-* attribute to store the color and size information of the product. To simplify the processing, we merge the colors and dimensions in a data-colors property and separate them with spaces.

For example:

 <div class="filterable" data-colors="blue large">Product A</div>
<div class="filterable" data-colors="green small">Product B</div>

Here, the first value of data-colors represents the color and the second value represents the size. This method requires strict consistency in the data format.

To distinguish between different types of filters (such as color filters and size filters), we add specific class names to them: color-checkbox and size-checkbox, while preserving the common filter-checkbox class.

HTML structure

The following is the HTML structure required to implement multi-condition filtering. It includes a checkbox group of colors and sizes, as well as a list of products to be filtered.

 <div>
  <h3>Color</h3>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="red">Red</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="green">Green</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="blue">Blue</label>
</div>
<div>
  <h3>Size</h3>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="small">small</label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="medium"></label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="large">Large</label>
</div>
<div>
  <h1>Filter results</h1>
  <div class="filterable" data-colors="blue large">Product A</div>
  <div class="filterable" data-colors="green small">Product B</div>
  <div class="filterable" data-colors="red medium">Product C</div>
  <div class="filterable" data-colors="red large">Product D</div>
</div>

JavaScript implementation

JavaScript is the core of implementing dynamic filtering. We will build the filter logic through the following steps:

1. Get DOM elements: Select all relevant check boxes and filterable product elements.
2. Define updateFilter function: This is the main function that handles filtering logic, which is called every time the checkbox state changes.
3. Extract selected values: Get all selected values ​​from the Color and Size checkbox groups respectively.
4. Handle No Filter Conditions: If no filter conditions are selected, all products are displayed.
5. Traversal and apply filtering logic: traversal each product element and apply complex AND/OR logic to determine its display status based on the selected filtering criteria.
6. Event Listening: Add a change event listener for all check boxes.
7. Initial filtering: Execute updateFilter once when the page is loaded to reflect the default filtering status.

 // Get all filter checkboxes const filterCheckboxes = document.querySelectorAll('.filter-checkbox');
// Get color filter checkbox const colorCheckboxes = document.querySelectorAll('.color-checkbox');
// Get size filter checkbox const sizeCheckboxes = document.querySelectorAll('.size-checkbox');
// Get all filterable product elements const filterables = document.querySelectorAll('.filterable');

/**
 * Update the function for filtering results.
 * Dynamically display or hide products based on the checkbox status selected by the user.
 */
function updateFilter() {
  // Get all selected color values ​​const colorChecked = Array.from(colorCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // Get all selected size values ​​const sizeChecked = Array.from(sizeCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // If no filter criteria are selected, all products are displayed and exit if (!(colorChecked.length > 0 || sizeChecked.length > 0)) {
    filterables.forEach(filterable => {
      filterable.style.display = 'block';
    });
    return;
  }

  // traverse each filterable product element filterables.forEach(filterable => {
    // parse the product's color and size from the data-colors attribute // Assume the format is "color value_size value"
    const itemAttributes = filterable.dataset.colors.split(' ');
    const itemColor = itemAttributes[0];
    const itemSize = itemAttributes[1];

    let shouldDisplay = false; // Mark whether the product should be displayed// Case 1: Both color and size filters have selected items (apply AND logic)
    if (colorChecked.length > 0 && sizeChecked.length > 0) {
      // The product must match the selected color and the selected size at the same time shouldDisplay = colorChecked.includes(itemColor) && sizeChecked.includes(itemSize);
    }
    // Case 2: Only the color filter has selected items (apply OR logic within colors)
    else if (colorChecked.length > 0) {
      // The product must match any selected color shouldDisplay = colorChecked.includes(itemColor);
    }
    // Case 3: Only the size filter has selected items (apply OR logic within sizes)
    else if (sizeChecked.length > 0) {
      // The product must match any selected size shouldDisplay = sizeChecked.includes(itemSize);
    }
    // Note: The situation where there is no filtering condition is processed at the beginning of the function// Set the product's display status according to the value of shouldDisplay filterable.style.display = shouldDisplay ? 'block' : 'none';
  });
}

// Add change event listener for all filterCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateFilter);
});

// Perform a filter when the page is loaded to reflect the default state updateFilter();

Notes and optimization suggestions

1. The robustness of data attributes: The current scheme depends on the fixed order of colors and dimensions in the data-colors attribute. If the data structure becomes more complex or the order may change, it is recommended to use independent data-color and data-size properties, for example:

    <div class="filterable" data-color="blue" data-size="large">Product A</div>

   This can make the parsing logic clearer and more scalable.

2. Multi-filter type extension: If you need to add more filter types (such as brand, material, etc.), the current if/else if structure will become verbose. More general approaches may be considered, such as:

   • Stores the filter configuration in an array, each element containing the filter's class name and the corresponding data-* attribute name.
   • Dynamically generate filter logic, loop through all filter types, check whether there are selected items, and combine conditions according to the rules.

3. Performance optimization: Frequently manipulating the style.display attribute of the DOM element directly can cause performance problems for pages that contain a large number of filterable products (hundreds or thousands). The following optimizations can be considered:

   • Offline DOM operation: first remove elements that need to be hidden from the DOM, or add them to a DocumentFragment, and then update the DOM at once.
   • CSS class switching: control the display/hiding of elements by adding/removing CSS classes, rather than directly modifying the style attribute. This allows CSS to take over animation and transition effects.
   • Virtual list/pagination: If the data volume is very large, consider only rendering products visible to the current viewport, or implementing the paging function.

4. User experience enhancement:

   • "Clear All Filters" button: Provides a button that allows the user to clear all selected filters in one click.
   • Filter result count: Displays the number of products matched under the current filter conditions.
   • Load indicator: When complex filtering operations are in progress, display a load indicator to avoid UI lag.

Summarize

This tutorial shows how to implement a flexible multi-condition dynamic filtering system using JavaScript that can intelligently switch between AND and OR logic based on the number of filters selected by the user. Through clear HTML structure, separate JavaScript logic and rational use of data attributes, we can build a user-friendly and powerful filtering interface. At the same time, it also emphasizes optimization strategies in performance, scalability and user experience that need to be considered in actual projects. Mastering these technologies will help you create more interactive and practical applications in web development.

The above is the detailed content of JavaScript multi-condition filtering: implement dynamic product filtering based on AND/OR logic. For more information, please follow other related articles on the PHP Chinese website!