jQuery Mobile Filtering

Filterable Elements

All elements that have one or more child elements can be filtered.

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. This creates a basic search field. Place the <input> element within a form, and the form <form> element should use the "ui-filterable" class - this class adjusts the margins between the search field and the filtered element.

• Then add the data-input attribute to the filtered element. The value should be the id of the <input> element.

Next, we create a filterable list:

Searching Elements in a List

<form class="ui-filterable"> <input id="myFilter" data-type="search"></form>
<ul data-role="listview" data-filter="true" data-input="#myFilter">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
</ul>

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

Example

<input id="myFilter" data-type="search" placeholder="Search by name..">

Custom Filtering

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

Example

<li data-filtertext="fav"><a href="#">Adele</a></li>

| | If you use the data-filtertext attribute in an element, the original text content of the element will be ignored during filtering. To find the list item "Adele" in this case, you would need to use the keywords: f, a, v, or fav. | | --- | --- |

More Examples

Filtering Collapsible Lists

Filtering Tables

Filtering <div> Elements