Search filtering
In addition to all the great list enhancement features just covered, one final enhancement provides great usability improvements to long lists. Sometimes, it’s just not possible to pare down all of the content that needs to go on a mobile website. When this is the case and you have a long list that seems nearly unusable, the search filter bar is a great way to handle the problem. Luckily, it doesn’t take much effort to add a search filter bar to a list with jQuery Mobile. Just add the data-filter
attribute to your list and give it a value of true
(Listing 12).
<ul data-role="listview" data-filter="true"> <li><a href="#">Chris A.</a></li> <li><a href="#">Cindy V.</a></li> <li><a href="#">John B.</a></li> <li><a href="#">Tammy D.</a></li> </ul>
The search filter bar adds a text input that provides the functionality for users to type what they’re looking for while the list is filtered in real time based on the input. For example, if you had a list of employee names and you added a search filter bar to that list, users would be able to filter and narrow down the results displayed on that page by entering one or more characters into the search filter text input.
You can also go a step farther and add dividers to your listview
while still including a search filter bar (Listing 13).
<ul data-role="listview" data-filter="true"> <li data-role="list-divider">C</li> <li><a href="#">Chris A.</a></li> <li><a href="#">Cindy V.</a></li> <li data-role="list-divider">J</li> <li><a href="#">John B.</a></li> <li data-role="list-divider">T</li> <li><a href="#">Tammy D.</a></li> </ul>
The combination of list dividers and a search filter bar is quite a nice feature and truly adds to the usability of long, tedious lists that would otherwise be unusable.