过滤后的jquery mobile listview计数项目

Posted 2023-05-09

【中文标题】过滤后的jquery mobile listview计数项目

【英文标题】：jquery mobile listview count items after filter

【发布时间】：2017-10-08 08:21:59

【问题描述】：

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

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

谢谢

【问题讨论】：

使用filterablefilter事件计算li:visible元素。

感谢 Omar，我确信使用 li:visible 也可以，正是您提出的 filterablefilter 建议帮助实现了我的目标

【参考方案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;

【讨论】：

这看起来不错，我会在今天晚些时候回家尝试实现它，谢谢！

太棒了，这用更少的代码行解决了我的问题，谢谢

$("li:visible", this).length 更短 ;) jsfiddle.net/Palestinian/s661tjfd