Skip to Main Content
jQuery Mobile: Up and Running
book

jQuery Mobile: Up and Running

by Maximiliano Firtman
February 2012
Beginner to intermediate content levelBeginner to intermediate
272 pages
6h 20m
English
O'Reilly Media, Inc.
Content preview from 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.

Search filters are a magic solution that adds a filtering system without any code

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery Mobile

jQuery Mobile

Jon Reid

Publisher Resources

ISBN: 9781449331085Supplemental ContentErrata Page