Examples

Examples

Table of content

• A simple example of filtering.js in action
• Enable all filters example
• Single select filter example
• Item in multiple filters
• Show number of results for each filter
• Prefilter items by using a text field

A simple example of filtering.js in action

A simple example of filtering.js in action.

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'));

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'));

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'));

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'));

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 {FilteringFlow} = filteringjs;

class MyFlow extends FilteringFlow {
    handleFilterResult(result) {
        super.handleFilterResult(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})`;
            }
        }
    }
}
new MyFlow(document.querySelector('#root'));

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.

Search:

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 searchElement = document.querySelector('#search-input');
searchElement.addEventListener('input', (event) => {
    flow.filter();
});

class MyFlow extends FilteringFlow {

    getAllFilterNames(item) {
        // Since we want to filter the entered search text by filftered name,
        // this is the helper method used for the example only.
        const result = [];
        for (const groupName of item.getGroupNames()) {
            for (const filterName of item.getFilterNames(groupName)) {
                result.push(filterName);
            }
        }
        return result;
    }

    get filteringOptions() {
        return {
            // The callback to prefilter items before actually filtering
            filterItem: (item, schema, filterData) => {
                for (const filterName of this.getAllFilterNames(item)) {
                    if (filterName.toLowerCase().includes(searchElement.value.toLowerCase())) {
                        // Return true if the item should be currently considered for filtering
                        return true;
                    }
                }
                return false;
            }
        };
    }
}

const flow = new MyFlow(document.querySelector('#root'));

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