https://github.com/webdsl/client-side-faceted-filtering

Simple javascript library enabling easy implementation of client-side faceted search, or actually faceted filtering of DOM content
https://github.com/webdsl/client-side-faceted-filtering

Last synced: about 1 month ago
JSON representation

Simple javascript library enabling easy implementation of client-side faceted search, or actually faceted filtering of DOM content

• Host: GitHub
• URL: https://github.com/webdsl/client-side-faceted-filtering
• Owner: webdsl
• License: apache-2.0
• Created: 2016-09-28T13:46:04.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-10-30T14:36:22.000Z (about 4 years ago)
• Last Synced: 2024-08-01T12:31:57.800Z (4 months ago)
• Language: JavaScript
• Size: 24.4 KB
• Stars: 6
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - webdsl/client-side-faceted-filtering - Simple javascript library enabling easy implementation of client-side faceted search, or actually faceted filtering of DOM content (others)

README

        
# client-side-faceted-filtering

Simple javascript library enabling easy implementation of client-side faceted search, or actually faceted filtering of DOM content.

## Demo

This library is used to provide filtering on program pages of conferences hosted on https://conf.researchr.org, such as:

- https://2018.programming-conference.org/program/program-programming-2018

- https://2018.splashcon.org/program/program-splash-2018

## Features

- Automatic generation of filterable values (the facets)

- Supports multiple facet categories

- Supports multiple facet selections from a single or multiple facet categories.

- Encodes filters into the URL using query-parameters, which are interpreted and applied when the library is loaded

## Dependencies

jQuery - this library is implemented heavily relying on jQuery selectors

## How to use

1. Include the js

``

The script will initialize faceted filtering on document ready

1. The lib will search for the following DOM-parts:

  - elements that have the `hidable` class

    - `hidable` elements are shown when they contain an element that matches the applied filters, or when no filters are applied at all.

    - `hidable` elements can be nested (e.g. a DOM-element for product category "Electronics" has the `hidable` class, but it also has nested DOM-elements with the `hidable` class for sub-categories "Audio" and "Video". The "Electronics" DOM-element will be hidden when "Audio" and "Video" are also hidden)

  - elements that have the `data-facet-XXXX="filter value"`-attribute. Here `XXXX` is the facet category, and `filter value` is the value that will be filterable within the facet category.

    - Optionally a `data-facet-XXXX-order="ORD"` attribute can be added to customize ordering of the facet values to be displayed in the facet-placeholders. `ORD` is the value to be used for sorting the facet values, using the default string sort.

  - elements with the `facet-placeholder`-class will be used as the container to add the facet filter elements to, e.g. `
`. The `data-facet-type="XXXX"`-attribute sets the category for which the placeholder will show the filter values, i.e. there should be elements with `data-facet-XXXX="..."` elsewhere.

  

That's all folks.