- jQuery Mobile Tutorial
- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
- jQuery Mobile Useful Resources
- jQuery Mobile - Interview Questions
- jQuery Mobile - Quick Guide
- jQuery Mobile - Useful Resources
- jQuery Mobile - Discussion
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|
You can set data-filter attribute to true on a listview to create a filter for its items of the list.
To generate a table filter, set data-filter attribute to true on the element of the table to produce filter for rows.
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.
The filter widget can also be used to filter any element containing another element.
You can set a specific theme for text field and also provide a placeholder for it.
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.
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 courseGet Started