Question

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

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

由于

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

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

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

筛选后的jquery移动列表视图计数项目

1 个答案: