Select Filter Control

Select filter control is used to filter content located at the specified CSS selector depending on user selection.

HTML Structure

Select filter control is defined by required data-jplist-control="select-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.

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

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />
                
<!-- select filter control -->
<select
    data-jplist-control="select-filter"
    data-group="group1"
    data-name="name1">

    <option
            value="0"
            data-path="default">Filter by</option>

    <option
            value="1"
            data-path=".title"
            selected>Title</option>

    <option
            value="2"
            data-path=".likes">Likes</option>
</select>

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

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

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

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

</div>

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

Top and bottom panels

Select 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. All other data attributes should also have the same values:

<!-- select filter control in the top panel -->
<select
    data-jplist-control="select-filter"
    data-group="group1"
    data-name="name1">

    <option
            value="0"
            data-path="default">Filter by</option>

    <option
            value="1"
            data-path=".title"
            selected>Title</option>

    <option
            value="2"
            data-path=".likes">Likes</option>
</select>

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

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

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

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

</div>

<!-- select filter control in the bottom panel -->
<select
    data-jplist-control="select-filter"
    data-group="group1"
    data-name="name1">

    <option
            value="0"
            data-path="default">Filter by</option>

    <option
            value="1"
            data-path=".title"
            selected>Title</option>

    <option
            value="2"
            data-path=".likes">Likes</option>
</select>

Jump to top

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

<select
    data-jplist-control="select-filter"
    data-group="group1"
    data-jump="top"
    data-name="name1">

    <option
            value="0"
            data-path="default">Filter by</option>

    <option
            value="1"
            data-path=".title"
            selected>Title</option>

    <option
            value="2"
            data-path=".likes">Likes</option>
</select>

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

<!-- select filter control -->
<select
    data-jplist-control="select-filter"
    data-group="group1"
    data-id="select1"
    data-name="name1">

    <option
            value="0"
            data-path="default">Filter by</option>

    <option
            value="1"
            data-path=".title"
            selected>Title</option>

    <option
            value="2"
            data-path=".likes">Likes</option>
</select>

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

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

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

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        <div class="likes">25</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" />

<!-- select filter control -->
<select
    data-jplist-control="select-filter"
    data-group="group1"
    data-id="select1"
    data-name="name1">

    <option
            value="0"
            data-path="default">Filter by</option>

    <option
            value="1"
            data-path=".title"
            selected>Title</option>

    <option
            value="2"
            data-path=".likes">Likes</option>
</select>

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

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

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

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        <div class="likes">25</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 select filter control.	"select-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-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-or`	Defines a group of controls that should be filtered though the "OR" logic	any text value, for example data-or="bags"

Inner elements

Data attributes of inner elements.

Name	Description	Values
`data-path`	CSS selector that defines the HTML element that should be filtered	"default" keyword for the initial value or any CSS selector