Filter list based on Checkbox value

Question

Ok so I am using:

<ul id="residentList" data-role="listview" data-inset="true" data-filter="true" />
//Now follows the list
<ul>

So this is easy, but what I basicaly also want is a checkbox. When checked it should filter on a certain string.

Do jquerymobile have this functionality? How can I achieve this. It will be super if I can Filter based on the Checked state of the checkbox + also whatever is in the Searchbox

Answer 1

When checked it should filter on a certain string. Do jquerymobile have this functionality?

Yes...

http://api.jquerymobile.com/filterable/

The filter reveal feature of the Filterable widget makes it easy to build a simple autocomplete with local data. When the Filterable widget is used on a list that has the data-filter-reveal="true" attribute, it will auto-hide all the list items when the search field is blank. If you need to search against a long list of values, we provide a way to create a filter with a remote data source.

<form class="ui-filterable">
    <input id="autocomplete-input" data-type="search" placeholder="Search fruits...">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input" 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>
</ul>

The filterable widget will work within any tag, not just ul/ol listviews. Look at the demos page as they have a variety of different methods that should interest you. Since you are using listview, be sure to perform

$("#residentList").listview("refresh); 

after you have made changes/updates.