JS Filterable

Overview

JS Filterable is used for creating lists of filterable items. Items are marked with the class is-filtered-out if they do not match the search query and at least one value for each active tag group.

Filtering by Query

Items can be filtered by a query string. The query string is entered via an input tag given the class js-filterable__search.

Areas within an item that should be searchable by query must be contained in an element with the class js-filterable__search-target.

Filtering by Tags

A tag is a key-value pair (K, V), where K is a string representing the name of the tag (e.g. "color") and V is an array of strings representing the possible values of that tag (e.g. ["red", "blue", "green"] ). Tags can be chosen using 3 types of inputs: checkboxes, radios, and select dropdowns.

Radios and select dropdowns should be used for tags where only one active value can be selected at a time. Any items that don't match the active value for each tag key will be filtered out.

Checkboxes should be used for tags where multiple active values can be selected at a time. Any items that don't match at least one active value for each tag key will be filtered out.

Options

data-filterable-autoupdate="true"

By applying this data attribute to the .js-filterable element, any changes to filterable form elements (i.e. select dropdowns, checkboxes, radio buttons, and search text fields) will automatically trigger the update method.

Examples

Basic

results
Big Red Car
Small Red Car
Big Red Bike
Small Red Bike
Big Blue Car
Small Blue Car
Big Blue Bike
Small Blue Bike
Sorry, no results.