jQuery Mobile Filter

Filterable Elements

Any element with one or more child elements can be filterable.

How to create a search field:

• The element you want to filter must use the data-filter="true" attribute.
• Create an <input> element and specify an id, and add the data-type="search" attribute to the element. This creates a basic search field. Place the <input> element inside a form, and use the "ui-filterable" class on the <form> element - this class adjusts the margins between the search field and the filterable element.
• Then add the data-input attribute to the element being filtered. The value needs to be the id of the <input> element.

Next, let's create a filterable list:

Tip:You can use the placeholder attribute in the search field to set hint text:

Custom Filter

Normally, the text inserted into each list item is used as the filter text (e.g., A corresponds to "Adele" or B corresponds to "Billy"). However, if you want to specify custom filter text, you need to use the data-filtertext attribute on child elements:

	If you use the data-filtertext attribute on an element, the element's source text content will be ignored during filtering. In this case, if you still want to find the list item "Adele", the keywords you need to use are: f, a, v, or fav.

More Examples

Filtering Collapsible Lists
How to filter a collapsible list.

Filtering Tables
How to filter table content.

Filtering <div> Elements
How to filter child <p> elements contained in a <div> element.