Views Client-Side Faceted Filters

Provides a data-attributes based client-side JavaScript Faceted Filter & Search functionality for Drupal Views.

Views style plugins currently provided:

• Grid, with Client-Side Faceted Filters

Feel free to add further core views style support, e.g. for lists.

How it works
The module's JavaScript picks up the views style output and looks for data-attributes:

• data-facet-FIELDNAME-value="facet value"

From these attributes, the module dynamically creates a faceted filter dynamically and places it into the DOM by the defined selector.

Not a "Facets" related module!
This is not related to Drupal Facets module and should not be used for datasets > 500 items, typically to be filtered. So better call this "Poor man's facets" for cases where you need a simple and lightweight solution, not a heavy search server!

Views style options

The module provides a lot of options to configure the client-side faceted filters in the views admin UI, for example:

• Injection selector
• Injection method
• Show / hide faceted filters
• Select views fields as facets (Enable / Disable, Title, Description, Show result count, Sort (+direction), Multivalue separator, Weight)
• Show fulltext search
• Show reset button
• Empty results text
• ... and more.

For all facets, search and reset blocks you can define a title and description.

csff.js Library

Once #3278939: Outsource library to npmjs.org and include via npm-asset is FIXED:
csff.js JavaScript Library for client-side faceted filters was created for this module, but can be used standalone.
You can find it here: https://github.com/webdsl/client-side-faceted-filtering

Installation

1. Install module regularly
2. Create or edit a view, based on fields (rendered entities can also be added as field)
3. Select the "Grid, with Client-Side Faceted Filters" views style
4. Configure the view style by the settings listed above
5. Be happy and help improve this module (even as poorman ;))

If you need an example with or without subitems, see the example submodule with an example view provided.

Alternatives

For more advanced cases you should definitely check The Lunr Module which, as the name says, is based on Lunr JS and much more capable.
Especially if you need things like partial search, paging and other filtering, better use this.

Supporting this module

Support DROWL's ♥ FOSS work on this module on OpenCollective!

Drupal and this module are FOSS. However, it takes dedicated people to develop and maintain. And they need YOU to give back!

We're committed to building and maintaining Drupal modules that benefit the entire community.

Supporting us on OpenCollective helps us continue to improve, innovate and contribute to Drupal's future. Every pledge makes a difference!

If this module has helped you, we would be very grateful for your donation to support its further development and maintenance.

Support our FOSS development ♥️

You can also speed up the development of features or bugfixes you'd love to see, by sponsoring and giving back!

Sponsor a feature or bugfix 🚀

Let's make Drupal even better, together!

Development proudly sponsored by German Drupal Friends & Companies:

webks: websolutions kept simple (https://www.webks.de)
and
DROWL: Drupalbasierte Lösungen aus Ostwestfalen-Lippe (OWL), Germany (https://www.drowl.de)