jQuery Mobile: Up and Running

Filtering Data with Search

I’ve left the best part for the last. Leave your book for a moment. If you are reading this book in any digital format, leave the reader or your browser. Go and take any of the list view samples we’ve done in this chapter.

Search for the ul or ol element and add data-filter="true", test it and then go back to the book.

The magic of jQuery Mobile has happened. When adding this simple attribute, a search box will be attached automatically at the top the list (full page or inset) and it works!

This feature will filter our list elements based on the user’s typing. The search text box looks very nice (as you can see in Figure 4-16), with a search icon at the left side, a watermark hint text, rounded corners, and a clear button at the right side.

Again, for this to work, just use the following code. Please go now to this book’s website to grab the source code to copy and paste. Typing it will be very hard for you:

<ul data-role="listview" data-filter="true">
  <!-- list rows -->
</ul>

We can customize the placeholder text using data-filter-placeholder, for example:

<ul data-role="listview" data-filter="true" data-filter-placeholder=
    "Search contacts...">
  <!-- list rows -->
</ul>

If we want to customize the search bar’s color swatch, we can use the data-filter-theme attribute.

Figure 4-16. Search filters are a magic solution that adds a filtering system without any code