MixItUp Dropdown Filter JS
### Steps to Implement:
1. **Include MixItUp in your project:**
Add MixItUp to your project by including the library in your HTML file or via npm/yarn.
<script src="https://cdn.jsdelivr.net/npm/mixitup@3/dist/mixitup.min.js"></script>Or install via npm:
npm install mixitup2. **Set up your HTML structure:**
<select id="filterDropdown">
<option value="all">All</option>
<option value=".category-a">Category A</option>
<option value=".category-b">Category B</option>
</select>
<div id="container">
<div class="mix category-a">Item 1</div>
<div class="mix category-b">Item 2</div>
<div class="mix category-a category-b">Item 3</div>
<div class="mix category-c">Item 4</div>
</div>3. **Initialize MixItUp:**
// Initialize MixItUp
var mixer = mixitup('#container');
// Filter using the dropdown
const filterDropdown = document.getElementById('filterDropdown');
filterDropdown.addEventListener('change', function () {
const selectedValue = filterDropdown.value;
mixer.filter(selectedValue);
});### Explanation:
– **HTML Dropdown**:
– Each “ in the dropdown has a value corresponding to the filter selector (e.g., `.category-a` for `Category A`).
– The `value="all"` allows you to show all items.
– **JavaScript**:
– MixItUp is initialized on the container with `id="container"`.
– An event listener is added to the dropdown to trigger the `filter` method when the user selects an option.
### Additional Features:
– **Default Active Option:**
Set a default filter when the page loads by passing the filter in the MixItUp initialization:
var mixer = mixitup('#container', {
load: {
filter: 'all' // Default filter
}
});– **Styling**:
Ensure proper CSS for the `.mix` elements to ensure they display well when filtered.