jquery mobile: data filter doesn't work after hide of list items

I am trying to provide my users with 2 ways to filter a list; either by a data-filter and by a couple of buttons.

The buttons use class attributes to remove groups of list items. In my real application, there are about 8 categories that I need to switch between; or show them all.

So I wrote the routine 'filterCategories' which .hide() all of the items, then .show() just the category that I want to display. This works fine. (I can't use nested lists because the items are arranged in a specific order - not in category order)

However, after I .hide() and .show(), the data-filter no longer works on the items that were hidden. The .hide() seems to remove the items from the listview-filter.

I have tried a listview('refresh') and that does not help.

Is there some other way to do this?

Thanks, Jeff

(cut down version below... click on "Remove 10s" then type 22 in the search bar. Only "Item 22" should appear. )

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 </head>

<script type="text/javascript" >
function filterCategories(showme){
    if (showme == 'all') {
        $('li.all').show(); 
    } else {
        $('li.all').hide();
        $('li.'+showme).show();
    }
    $('#itemResults').listview('refresh');
}

$( '#Page1' ).live( 'pageinit',function(event){
  });

</script>

  <body>
    <div data-role="page" id="Page1">
    <div data-role="content">
            <ul data-role="listview" id="itemResults" data-filter="true">
                <li class="" onclick="filterCategories( '20s' );"><a 
href="#">Remove 10s</a></li>    
                <li class="" onclick="filterCategories( '10s' );"><a 
href="#">Remove 20s</a></li>    
                <li class="all 10s" ><a href="#">Item 11</a></li>   
            <li class="all 20s" ><a href="#">Item 22</a></li>   
            <li class="all 10s" ><a href="#">Item 13</a></li>   
                <li class="all 20s" ><a href="#">Item 24</a></li>   
                <li class="all 10s" ><a href="#">Item 15</a></li>   
                <li class="all 20s" ><a href="#">Item 26</a></li>   
            </ul>
    </div>
    </div>
  </body>
</html>

Solution

I had the exact same problem and after much troubleshooting I found the solution: Rather than using $('li-element').hide() or .show(), you must add or remove class "ui-screen-hidden".

$('li-element').removeClass("ui-screen-hidden");

$('li-element').addClass("ui-screen-hidden");