jquery mobile listview count items after filter

Question

I need some help. I am trying to display the number of visible listview items after filter has been applied, either by a button click or by applying a text filter. The button clicks simply put text into the text filter and so it's all the same trigger point hopefully.

Html is pretty much like this...

    <div>
        <form class="ui-filterable">
            <input id="myFilter" data-type="search" placeholder="Text Filter...">
        </form>

        <div data-role="fieldcontain">
            <input type="button" data-inline="true" value="More Info Provided" id="more-info-provided-filter" />
            <input type="button" data-inline="true" value="In Progress" id="in-progress-filter" />
        </div>

        <p id="listInfo"></p>

        <ol data-role="listview" id="myList" data-filter="true" data-input="#myFilter"></ol>        
    </div>

And my javascript for each button click is just like this...

$(document).on('click', '#in-progress-filter', function(){       
    $('input[data-type="search"]').val('in progress');
    $('input[data-type="search"]').trigger("keyup");

    var volListItemsDisplayed;
    volListItemsDisplayed = $("#myList li:visible").length;    
    document.getElementById("listInfo").innerHTML = "Number of items (filter on): " + volListItemsDisplayed;
});

The javascript fires before the filter is applied. Is there a way that I can attach my function to the filter, like an onchange type of event? You can assume the listview is populated with records containing either of the text strings being applied by the buttons.

Thanks

Answer 1

With JQM you can do it following way:

$(document).on("pagecreate", "#search-page-id", function(e) {
    $("#my-list" ).on("filterablefilter", function(e, data) {
        var result = $(this).children("li").not(".ui-screen-hidden").length;
        console.log("FILTERED ITEMS: ",result);
    });
});

If inside your listview you have also list dividers, you may narrow down the filter by excluding them:

var result = $(this).children("li").not("[data-role=list-divider]").not(".ui-screen-hidden").length;