jQuery and JavaScript Phrasebook

Implementing a Searchable List

Click here to view code image

<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:

Click here to view ...