Buttons Text Filter Control

This control works like checkbox or radio button but has a button layout. It's used to filter content that contains the specified CSS selector.

See the Pen jPList Buttons Text Filter Control by 1rosehip (@1rosehip) on CodePen.

HTML Structure

Buttons text filter control is defined by required data-jplist-control="buttons-text-filter" data attribute. The data-group attribute defines group of elements that should be filtered. The full list of data attributes can be found here.

Radio Buttons Mode

In radio mode all buttons should have the same name or data-name attribute. Also data-mode attribute should be radio.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter control -->
<button
        type="button"
        data-jplist-control="buttons-text-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-text="car"
        data-name="filter-1">
    Items with .title class that contains "car" word
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Checkbox Mode

In checkbox mode all buttons should have data-mode="checkbox" attribute.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter control -->
<button
        type="button"
        data-jplist-control="buttons-text-filter"
        data-path=".title"
        data-group="group1"
        data-selected="true"
        data-text="car"
        data-mode="checkbox">
    Items with .title class that contains "car" word
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Top and bottom panels

Button text filter controls can be placed in both top and bottom panels for the better user experience. In this case data-name attribute with the same value should be added to all controls. All other data attributes should also have the same values:

<!-- TOP PANEL CONTROLS -->
<button
        type="button"
        data-jplist-control="buttons-text-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-text="car"
        data-name="filter-1">
    Items with .title class that contains "car" word
</button>
                
<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- BOTTOM PANEL CONTROLS -->
<button
        type="button"
        data-jplist-control="buttons-text-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-text="car"
        data-name="filter-1">
    Items with .title class that contains "car" word
</button>

Jump to top

data-jump data attribute can be used to scroll page to the specified location when user clicks a button. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.

<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-text-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-text="car"
        data-jump="top"
        data-name="filter-1">
    Items with .title class that contains "car" word
</button>

Deep Linking

Deep links can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and deepLinking setting should be true in jPList parameters.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter control -->
<button
        type="button"
        data-jplist-control="buttons-text-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-text="car"
        data-id="cartitle"
        data-name="filter-1">
    Items with .title class that contains "car" word
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        deepLinking: true
    });
</script>

Storage

Local storage, session storage or cookies can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and storage setting should be passed to jPList constructor.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter control -->
<button
        type="button"
        data-jplist-control="buttons-text-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-text="car"
        data-id="cartitle"
        data-name="filter-1">
    Items with .title class that contains "car" word
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        storage: 'localStorage', //'localStorage', 'sessionStorage' or 'cookies'
        storageName: 'jplist'
    });
</script>

Data Attributes

The full list of control data attributes.

Name	Description	Values
`data-jplist-control`	Defines buttons text filter control.	"buttons-text-filter"
`data-group`	Defines group of items that should be filtered. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute.	any text value
`data-path`	CSS selector that defines the HTML element that should be filtered	"default" keyword for the initial value or any CSS selector
`data-text`	the filter text value	any text value
`data-mode`	Defines filter behaviour.	"radio" (the default) or "checkbox"
`data-selected`	Defines if a button is selected.	"true" or "false"
`data-name`	The data-name attribute is used to identify the same controls in different panels or the group of buttons in radio mode. Different controls should have different data-name attributes. By default, data-name attribute has default value.	any text value
`data-jump`	This data attribute can be used to scroll page to the specified location when user selects an option. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.	top keyword or any CSS selector
`data-id`	This attribute is used for deep linking.	any text value that may contain letters, digits, underscores or dashes
`data-regex`	This optional data attribute defines characters that should be ignored during the filtering. For example, data-regex="[^a-zA-Z0-9]+" ignores all characters except English letters and numbers.	JavaScript regex
`data-or`	Defines a group of controls that should be filtered though the "OR" logic	any text value, for example data-or="bags"
`data-mode`	Defines text filter mode: contains - find all elements that contain user input startsWith - find all elements that start with user input endsWith - find all elements that end with user input equal - find all elements that equal to user input	contains (default), startsWith, endsWith, equal