The filterable widget has an event (filterablefilter
- http://api.jquerymobile.com/filterable/#event-filter) you can handle after it is done filtering. For convenience I added an id to your div with a data-filter.
<div id="filterMe" data-role="listview" data-inset="true" data-filter="true">...
Then on pagecreate
, I added the event handler:
$(document).on("pagecreate", "#page", function(){
$("#filterMe").on( "filterablefilter", function( event, ui ) {
ui.items.each(function( index ) {
$(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");
});
});
});
The returned UI object is a jQuery object whose items collection is a list of the collapsible objects the filter handled. So using the each()
function, you can iterate the list and set the collapsed state based on whether the class ui-screen-hidden
has been applied by the filter. After that I remove the ui-screen-hidden
class so that none of the items are hidden. If you still want items hidden as well, you can just remove the .removeClass("ui-screen-hidden")
.
Here is a working FIDDLE