jquery 过滤后的移动列表视图计数项目

jquery mobile listview count items after filter

我需要一些帮助。我试图在应用过滤器后显示可见列表视图项的数量,方法是单击按钮或应用文本过滤器。单击按钮只是将文本放入文本过滤器,因此希望触发点相同。

Html 差不多就是这样...

    <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>

我的 javascript 每次点击按钮都是这样...

$(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;
});

javascript 在应用过滤器之前触发。有没有一种方法可以将我的函数附加到过滤器,比如 onchange 类型的事件?您可以假设列表视图中填充了包含按钮应用的任一文本字符串的记录。

谢谢

使用 JQM,您可以按照以下方式进行:

$(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);
    });
});

如果您的列表视图中还有列表分隔符,您可以通过排除它们来缩小筛选范围:

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