jQuery Mobile - Fliterable Widget


By using the data-filter = "true" attribute, you can filter the children of any element. The child will contain the text, which will be used for filtering by default.

However, you have an alternate option of setting the data-filtertext attribute to a string on any of the child, which will be considered for filtering.

The following table lists filterable types used in jQuery mobile −

Sr.No. Filterable type & Description
1 Basic filter

You can set data-filter attribute to true on a listview to create a filter for its items of the list.

2 Table filter

To generate a table filter, set data-filter attribute to true on the element of the table to produce filter for rows.

3 Controlgroup Filter

The controlgroup buttons can also be filtered using data-filter attribute on the elements, which creates the controlgroup.

4 Filter Collapsible Set

The filter widget can also be used on collapsible set. You have to use data-filter attribute and set to true on the element that creates the collapsible set.

5 Filter Collapsible Set and collapsible children

The filter widget can also be used on collapsible set and collapsible children.

6 Filter Anything

The filter widget can also be used to filter any element containing another element.

7 Filter Styling

You can set a specific theme for text field and also provide a placeholder for it.

8 Filter Reveal

This feature will allow you to build a simple autocomplete easily with local data.

9 Filter Custom Callback

As with the extension of the listview, the callback function can be provided to the filter or even override the filter entirely on the filterablebeforefilter event.

10 Pre-rendering

By specifying the data-enhanced = "true" attribute, you can prevent the filterable widget executing the filter one time during the startup.

Kickstart Your Career

Get certified by completing the course

Get Started