javascript - jquery mobile listview 对过滤后的项目进行计数

Question

我需要一些帮助。我试图通过单击按钮或应用文本过滤器来显示应用过滤器后可见 ListView 项目的数量。单击按钮只需将文本放入文本过滤器中，因此希望它们都是相同的触发点。

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 类型的事件？您可以假设 ListView 中填充了包含按钮应用的任一文本字符串的记录。

谢谢

Answer 1

使用 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);
    });
});

如果您的 ListView 中还有列表分隔符，您可以通过排除它们来缩小过滤器的范围:

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