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.
Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.