Update Bubble Count For Filtered Lists - jQuery Mobile
When using the Filtered List search (http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html) and the Bubble Count (http://jquerymobile.com/demos/1.0/docs/lists/lists-count.html) in the jQuery Mobile interface the bubble count number doesn't auto-populate/auto-update. This is something you need to add yourself. It would seem to me that this should be simple enough to do myself and with a little event binding this can all be fixed.
The following code assumes that your <ul> has an id of "orderedList", each header <li> tag has a class name of "headerBar" and each <li> including the header have an attribute called groupname that has the value of the grouping assigned to it.
The code binds the keyup event to the search input textbox and the click event on the clear button. When those events fire the populateBubble function executes which dumps the count of the visible items into the bubble tag.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// disable ajax nav
//$.mobile.ajaxLinksEnabled = false;
populateBubbles();
$("div.ui-input-search").delegate("input", "keyup", function () {
populateBubbles(true);
}).delegate("a.ui-input-clear", "click", function () {
populateBubbles(false);
});
});
function populateBubbles(isFiltered) {
var selector;
if (isFiltered) {
selector = ":visible";
} else {
selector = "";
}
$("#orderedList li.headerBar" + selector).each(function () {
var groupName = $(this).attr("groupname");
$(this).find("ui-li-count").eq(0).text($('li[groupname="' + groupName + '"]' + selector).length - 1);
});
}
</script>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="d">
<h1>Header Bar</h1>
</div>
<div data-role="content" style="height:100%">
<ul id="orderedList" data-role="listview" data-filter="true" data-filter-placeholder="Search Workorders...">
<li groupname='group1' data-role="list-divider" class='headerBar'>12/8/2011<span class="ui-li-count"></span></li>
<li groupname="group1">123 - Phrase</li>
<li groupname="group1">124 - Test</li>
<li groupname="group1">125 - Hello</li>
<li groupname="group1">126 - World</li>
<li groupname="group1">127 - Phone</li>
<li groupname="group1">128 - Tent</li>
<li groupname='group2' data-role="list-divider" class='headerBar'>12/9/2011<span class="ui-li-count"></span></li>
<li groupname="group2">133 - Phrase</li>
<li groupname="group2">134 - Test</li>
<li groupname="group2">135 - Hello</li>
<li groupname="group2">136 - Work order 1</li>
<li groupname="group2">137 - Phrase</li>
<li groupname="group2">138 - Phone</li>
<li groupname='group3' data-role="list-divider" class='headerBar'>12/10/2011<span class="ui-li-count"></span></li>
<li groupname="group3">143 - Phone</li>
<li groupname="group3">144 - Test</li>
<li groupname="group3">145 - Test</li>
<li groupname="group3">146 - World</li>
<li groupname="group3">147 - World</li>
<li groupname="group3">148 - Work order</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="d">
<h4 id="footer">Footer Bar</h4>
</div><!-- /footer -->
</div><!-- /page -->