jQuery Mobile Filters

Filterable Elements

All components that have more than one kid component, can be sifted.

How To Create a Search Field:

  • The component you need to be filterable, must incorporate the information filter="true" attribute.
  • Create a <input> component with a predefined id and include the information type="search" characteristic. This will make a fundamental hunt field. Wrap the <input> in a structure, and include the "ui-filterable" class to the <form> component - this will modify the edge between the pursuit field and the filterable element.
  • Then, add the information input credit to the filterable component. Its esteem must match the id of the <input> element.

Below, we have made a filterable rundown view:

Search for components in a list

<form class="ui-filterable">
  <input id="myFilter" information type="search">

<ul information role="listview" data-filter="true" information input="#myFilter">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
Try it yourself »

Tip: Use a placeholder to determine a short clue that depicts the normal estimation of the inquiry field:


<input id="myFilter" information type="search" placeholder="Search for names..">
Try it yourself »

Custom Filter

The message inside every youngster component is the real content that is utilized for sifting (like "Adele" or "B" for "Billy"). Notwithstanding, in the event that you need to channel the inquiry to a custom channel content rather, you can add the information filtertext credit to any kid element:


<li data-filtertext="fav"><a href="#">Adele</a></li>
Try it yourself »