O'Reilly logo

jQuery and JavaScript Phrasebook by Brad Dayley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required