Searching List Content

If you are using a list to display a large number of items you may want to include a search filter to help users navigate through your selection to find what they need.

Creating a search filter is easier than you might think. All you need to do is add an attribute of data-filter="true" to the ul element of your list. Listing 11.7 shows a list with a search filter applied.

Listing 11.7 Adding a Search Filter to a List

---

 1: <ul data-role="listview" data-filter="true">
 2:   <li data-role="list-divider">Signed Bands</li>
 3:   <li>Planned obscolencense</li>
 4:   <li>S.E.P. (Scortched Earth Policy)</li>
 5:   <li>Ground Pounder</li>
 6:   <li>Decibel Hertz</li>
 7:   <li>Ultra Violent Lights</li>
 8:   <li>Southern Tempo</li>
 9:   <li>Candy Lab</li>
10:   <li>Brother Tobias</li>
11:   <li>Silent Squall</li>
12:   <li>Red Air Day</li>
13:   <li>Fourty Floor</li>
14:   <li>Marvelous Makeover</li>
15:   <li>Anthem</li>
16:   <li>Groupraiser</li>
17:   <li>Nine Knights</li>
18:   <li>Modulation</li>
19:   <li>Saw the Sine</li>
20: </ul>