jQuery Mobile - Fliterable Widget

Description

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.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started