Implementing a Searchable List
<ul data-role="listview" data-filter="true"> <li>Rome</li><li>Milan</li><li>Florence</li><li>Genoa</li><li>Venice</li> <li>Naple</li><li>Balonga</li><li>Bari</li><li>Turin</li><li>Palermo</li> </ul>
Another useful feature is the searchable list. jQuery Mobile has a nice search feature built in that allows you to search the current list. The search feature adds a text input at the top of the list and filters the items as you type text into the list. Only the items that match the filter text are displayed.
Searchable lists are created by adding data-filter= "true" to the <ul> element containing the list. For example, the following code adds a searchable list:
Get jQuery and JavaScript Phrasebook 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.
