Examples

Table of contents

A simple example of filtering.js in action

A simple example of filtering.js in action. Test it out by clicking on the color and size filters.

Red
Blue
Small
Large
HTML
<div id="root">
    <div>
        <div class="filtering-group" data-group-name="color">
            <div class="filtering-filter" data-filter-name="red">Red</div>
            <div class="filtering-filter" data-filter-name="blue">Blue</div>
        </div>
        <div class="filtering-group" data-group-name="size">
            <div class="filtering-filter" data-filter-name="small">Small</div>
            <div class="filtering-filter" data-filter-name="large">Large</div>
        </div>
    </div>

    <div>
        <div class="filtering-item" data-filter-color="red" data-filter-size="small"></div>
        <div class="filtering-item" data-filter-color="blue" data-filter-size="large"></div>
    </div>
</div>
JavaScript
const {FilteringFlow} = filteringjs;
new FilteringFlow(document.querySelector('#root')).filter();
CSS
/* Note: CSS is simplified and only shows
styles that are relevant to the example. */

/* Filters */
.filtering-filter.checked {
    background-color: lightblue;
}

.filtering-filter.disabled {
    color: lightgrey;
}

/* Items */
.filtering-item.filtered {
    display: none;
}

Enable all filters example

A simple example that demonstrates a button to enable all filter. Add data-filter-type="all" to the filtering-filter element.

Red
Green
Blue
All
HTML
<div id="root">
    <div>
        <div class="filtering-group" data-group-name="color">
            <div class="filtering-filter" data-filter-name="red">Red</div>
            <div class="filtering-filter" data-filter-name="green">Green</div>
            <div class="filtering-filter" data-filter-name="blue">Blue</div>
            <div class="filtering-filter" data-filter-type="all">All</div>
        </div>
    </div>

    <div>
        <div class="filtering-item" data-filter-color="red"></div>
        <div class="filtering-item" data-filter-color="green"></div>
        <div class="filtering-item" data-filter-color="blue"></div>
    </div>
</div>
JavaScript
const {FilteringFlow} = filteringjs;
new FilteringFlow(document.querySelector('#root')).filter();
CSS
/* Note: CSS is simplified and only shows
styles that are relevant to the example. */

/* Filters */
.filtering-filter.checked {
    background-color: lightblue;
}

.filtering-filter.disabled {
    color: lightgrey;
}

/* Items */
.filtering-item.filtered {
    display: none;
}

Single select filter example

A simple example that demonstrates single-select for filters. Add data-select-type="single" to the filtering-group element.

Red
Green
Blue
HTML
<div id="root">
    <div>
        <div class="filtering-group" data-group-name="color" data-select-type="single">
            <div class="filtering-filter" data-filter-name="red">Red</div>
            <div class="filtering-filter" data-filter-name="green">Green</div>
            <div class="filtering-filter" data-filter-name="blue">Blue</div>
        </div>
    </div>

    <div>
        <div class="filtering-item" data-filter-color="red"></div>
        <div class="filtering-item" data-filter-color="green"></div>
        <div class="filtering-item" data-filter-color="blue"></div>
    </div>
</div>
JavaScript
const {FilteringFlow} = filteringjs;
new FilteringFlow(document.querySelector('#root')).filter();
CSS
/* Note: CSS is simplified and only shows
styles that are relevant to the example. */

/* Filters */
.filtering-filter.checked {
    background-color: lightblue;
}

.filtering-filter.disabled {
    color: lightgrey;
}

/* Items */
.filtering-item.filtered {
    display: none;
}

Item in multiple filters

To add an item to multiple filters, just separate the filter names in the filtering-item’s data attribute value by comma. e.g. the color purple is a mix of red and blue. To put it into both filters, use data-filter-color="red,blue".

Red
Blue
HTML
<div id="root">
    <div>
        <div class="filtering-group" data-group-name="color">
            <div class="filtering-filter" data-filter-name="red">Red</div>
            <div class="filtering-filter" data-filter-name="blue">Blue</div>
        </div>
    </div>

    <div>
        <div class="filtering-item" data-filter-color="red"></div>
        <div class="filtering-item" data-filter-color="blue"></div>
        <div class="filtering-item" data-filter-color="red,blue"></div>
    </div>
</div>
JavaScript
const {FilteringFlow} = filteringjs;
new FilteringFlow(document.querySelector('#root')).filter();
CSS
/* Note: CSS is simplified and only shows
styles that are relevant to the example. */

/* Filters */
.filtering-filter.checked {
    background-color: lightblue;
}

.filtering-filter.disabled {
    color: lightgrey;
}

/* Items */
.filtering-item.filtered {
    display: none;
}

Show number of results for each filter

The number of items that would pass filtering is added to each filter.

Red
Green
Blue
Small
Large
HTML
<div id="root">
    <div>
        <div class="filtering-group" data-group-name="color">
            <div class="filtering-filter" data-filter-name="red">Red <span class="total"></span></div>
            <div class="filtering-filter" data-filter-name="green">Green <span class="total"></span></div>
            <div class="filtering-filter" data-filter-name="blue">Blue <span class="total"></span></div>
        </div>
        <div class="filtering-group" data-group-name="size">
            <div class="filtering-filter" data-filter-name="small">Small <span class="total"></span></div>
            <div class="filtering-filter" data-filter-name="large">Large <span class="total"></span></div>
        </div>
    </div>

    <div>
        <div class="filtering-item" data-filter-color="red" data-filter-size="small"></div>
        <div class="filtering-item" data-filter-color="blue" data-filter-size="large"></div>
        <div class="filtering-item" data-filter-color="red" data-filter-size="large"></div>
        <div class="filtering-item" data-filter-color="red" data-filter-size="small"></div>
        <div class="filtering-item" data-filter-color="green" data-filter-size="small"></div>
    </div>
</div>
JavaScript
const flow = new FilteringFlow(document.querySelector('#root'));

// Register a 'filter' listener to set the number of possibly filtered items
flow.addEventListener('filter', (event) => {
    const result = event.data.result;
    for (const group of result.groups) {
        for (const filter of group.filters) {
            const filterElement = filter.schemaFilter.data.element;
            // Update the number next to the filter to indicate how many items are or would be filtered
            filterElement.querySelector('.total').innerText = `(${filter.possibleItems.length})`;
        }
    }
})
flow.filter(); // Always trigger filter after all plug-ins and listeners have been registered
CSS
/* Note: CSS is simplified and only shows
styles that are relevant to the example. */

/* Filters */
.filtering-filter.checked {
    background-color: lightblue;
}

.filtering-filter.disabled {
    color: lightgrey;
}

/* Items */
.filtering-item.filtered {
    display: none;
}

Prefilter items by using a text field

You can totally customize which items to pre-filter. In this example we’re just using an text field.

Red
Blue
Small
Large
HTML
<div id="root">
    <div>
        <label for="search-input">Search: </label>
        <input type="text" id="search-input">
    </div>
    <div>
        <div class="filtering-group" data-group-name="color">
            <div class="filtering-filter" data-filter-name="red">Red</div>
            <div class="filtering-filter" data-filter-name="blue">Blue</div>
        </div>
        <div class="filtering-group" data-group-name="size">
            <div class="filtering-filter" data-filter-name="small">Small</div>
            <div class="filtering-filter" data-filter-name="large">Large</div>
        </div>
    </div>

    <div>
        <div class="filtering-item" data-filter-color="red" data-filter-size="small"></div>
        <div class="filtering-item" data-filter-color="blue" data-filter-size="large"></div>
    </div>
</div>
JavaScript
const {FilteringFlow} = filteringjs;

const filteringRootElement = document.querySelector('#root');
const searchElement = document.querySelector('#search-input');

const flow = new FilteringFlow(filteringRootElement);

// Register a 'filter-item' listener which works similar to Array.filter
flow.filtering.addEventListener('filter-item', (event) => {
    const item = event.data.item;
    const element = item.data.element;

    for (const [name, value] of Object.entries(element.dataset)) {
        if (name.startsWith('filter')
            && value.toLowerCase().includes(searchElement.value.toLowerCase())) {
            // only check data-filter attributes and return true if any value includes the search query
            return true;
        }
    }

    return false;
});

searchElement.addEventListener('input', (event) => {
    flow.filter();
});

flow.filter(); // Always trigger filter after all plug-ins and listeners have been registered
CSS
/* Note: CSS is simplified and only shows
styles that are relevant to the example. */

/* Filters */
.filtering-filter.checked {
    background-color: lightblue;
}

.filtering-filter.disabled {
    color: lightgrey;
}

/* Items */
.filtering-item.filtered {
    display: none;
}