markxxv / filtering.js

Faceted Filters

filtering.js

> Under construction <

This library is currently usable but still under construction. The filtering algorithm is fully implemented but design and tests need improvement, and options and callbacks need to be added.

What is Filtering.js

(Source: readme-preview.html)

Difference to other libraries?

• ⚡ fast
• 🐜 <10kB small
• 🏆 Supported by modern browsers using ES6 features. ^1,2,3,4
• 🏋️ Lifting complex logic from the developer.
• 🔋 Parse filter structure and items directly from HTML.
• 🔮 Info about how many items would be filtered. No more 0 results.
• 👪 Works in Node and Browser environment.

Performance

Following tables illustrate the performance of the library measured on Desktop. The runtime is calculated by averaging 1.000 scenarios with various number of items, groups, and filters and also various number of checked filters.

100 items

filters \ groups	2	4	8
8	<1 ms	<1 ms	<1 ms
24	<1 ms	<1 ms	<1 ms
64	<1 ms	<1 ms	<1 ms

1.000 items

filters \ groups	2	4	8
8	2 ms	3 ms	10 ms
24	2 ms	3 ms	6 ms
64	2 ms	3 ms	5 ms

How to use?

The preferred way to add filtering functionality to your project is by using the FilteringFlow helper class. It handles adding and removing of checked/disabled classes for filters and filtered classes for items. All classes can be adapted to easily suite existing projects too.

A simple, out of the box example:

<div id="root">
    <div id="filtering">
        <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 id="items">
        <div id="item-1" class="filtering-item" data-filter-color="red" data-filter-size="small"></div>
        <div id="item-2" class="filtering-item" data-filter-color="blue" data-filter-size="large"></div>
    </div>
</div>

<script>
    const {FilteringFlow} = filteringjs;
    new FilteringFlow(document.querySelector('#root'));
</script>

That's it!

Parser

The Schema can be directly parsed from HTML. For this, the structure has to be built according to following rules. All class names can be adapted to suite existing projects. See above example, example.html, initialize-from-html.html or other examples.

• Group element
  • .filtering-group
  • data-group-name="color"
  • Filter element
    • .filtering-filter
    • data-filter-name="red"
• Item element
  • .filtering-item
  • data-filter-color="red"
    (the attribute name ends with the group name and is assigned the filter name)

API

! Filter

• Trigger
• Pre-filter

! API

• Options
• Result
• Functions
• Callbacks