By passing a function to filter
, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return true
to keep the element or false
to hide it.
// Filters elements with a data-title attribute with less than 10 characters
shuffleInstance.filter((element) => {
return element.dataset.title.length < 10;
});
// Advanced filtering
addSearchFilter() {
document.querySelector('.js-shuffle-search').addEventListener('keyup', this._handleSearchKeyup.bind(this));
};
// Filter the shuffle instance by items with a title that matches the search input.
_handleSearchKeyup(evt) {
const searchText = evt.target.value.toLowerCase();
this.shuffle.filter((element, shuffle) => {
const titleElement = element.querySelector('.picture-item__title');
const titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
};
Check out the compounded filters demo.