Radio Buttons Text Filter Control

Radio buttons text filter control is used to filter content by the defined text value at the specified CSS selector path.

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

HTML Structure

Radio buttons text filter control is defined by required data-jplist-control="radio-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.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />
                
<!-- radio button text filter control -->
<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-path=".title"
    data-group="group1"
    data-name="name1"
    name="name1"
    value="car"
    checked>
Filter by 'car'
</input>

<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-group="group1"
    data-name="name1"
    data-path=".title"
    name="name1"
    value="a">
Filter by 'a'
</input>

<!-- 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 2</div>
        ....
    </div>

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

</div>

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

Top and bottom panels

Radio button text filter control 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. name attribute should be different in top and bottom panels. All other data attributes should have the same values:

<!-- radio button text text filter control in the top panel -->
<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-path=".title"
    data-group="group1"
    data-name="name1"
    name="top-panel-name"
    value="car"
    checked>
Filter by 'car'
</input>

<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-group="group1"
    data-name="name1"
    data-path=".title"
    name="top-panel-name"
    value="a">
Filter by 'a'
</input>

<!-- 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 2</div>
        ....
    </div>

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

</div>

<!-- radio button text filter control in the bottom panel -->
<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-path=".title"
    data-group="group1"
    data-name="name1"
    name="bottom-panel-name"
    value="car"
    checked>
Filter by 'car'
</input>

<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-group="group1"
    data-name="name1"
    data-path=".title"
    name="bottom-panel-name"
    value="a">
Filter by 'a'
</input>

Jump to top

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

<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-path=".title"
    data-group="group1"
    data-name="name1"
    name="top-panel-name"
    value="car"
    data-jump="top"
    checked>
Filter by 'car'
</input>

Deep Linking

Deep links can be used to keep user changes and control state 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" />

<!-- radio button text filter control -->
<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-group="group1"
    data-name="name1"
    data-path=".title"
    name="name1"
    data-id="title1"
    value="a">
Filter by 'a'
</input>

<!-- 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>

<!-- 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" />

<!-- radio button text filter control -->
<input
    type="radio"
    data-jplist-control="radio-buttons-text-filter"
    data-group="group1"
    data-name="name1"
    data-path=".title"
    name="name1"
    data-id="title1"
    value="a">
Filter by 'a'
</input>

<!-- 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>

<!-- 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 radio button text filter control.	"radio-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-name`	The data-name attribute is used to identify the same controls in different panels. Different controls should have different data-name attributes. By default, data-name attribute has default value.	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-jump`	This data attribute can be used to scroll page to the specified location when user changes a radio button value. 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