jQuery Mobile: Filter Reveal

This entry is part 34 of 73 in the series jQuery Mobile

The filter reveal feature makes it easy to build a simple autocomplete with local data.

When a filter has the data-filter-reveal=’true’ attribute, it will auto-hide all the list items when the search field is blank.

Filter Reveal
<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Filter Reveal</h1></div>
    <ul data-role='listview' data-filter='true' data-filter-reveal='true' data-filter-placeholder='Search fruits...' data-inset='true'>
        <li><a href='#'>Apple</a></li>
        <li><a href='#'>Banana</a></li>
        <li><a href='#'>Cherry</a></li>
        <li><a href='#'>Cranberry</a></li>
        <li><a href='#'>Grape</a></li>
        <li><a href='#'>Orange</a></li>

    <div data-role='footer' data-position='fixed'>
Try The Code

The data-filter-placeholder attribute can be added to specify the placeholder text for the filter.

In the example above, I have put the text search fruit as the attribute for data-filter-placeholder since the list contains mainly different types of fruits.

Series Navigation<< jQuery Mobile: Filter Collapsible Set
jQuery Mobile: Grid >>

Leave a comment

Leave a Reply