jQuery Mobile: Filterable List

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

Using jQuery Mobile, it is easy to set up a filterable list.

The children of any element can be filtered by setting the attribute data-filter=’true’ on the element.

<!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>Filterable List</h1></div>

    <form class='ui-filterable'>
        <input id='filterBasic_id' data-type='search'>
    <ul data-role='listview' data-filter='true' data-input='#filterBasic_id'>
        <li>Pit Bull</li>
        <li>Kylie Minogue</li>
        <li>Depeche Mode</li>
        <li>Miley Cyrus</li>

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

Add class ui-filterable to the form in which you wrap the search input to the listview.

The input box needs to have data-type=’search’ with the id pointing towards the listview as in line 17.

Series Navigation<< jQuery Mobile: Collapsible Set With Different Icons
jQuery Mobile: Table Filter >>

Leave a comment

Leave a Reply