根据复选框值过滤列表

Posted 2023-05-09

【中文标题】根据复选框值过滤列表

【英文标题】：Filter list based on Checkbox value

【发布时间】：2016-11-15 20:53:21

【问题描述】：

好的，我正在使用：

<ul id="residentList" data-role="listview" data-inset="true" data-filter="true" />
//Now follows the list
<ul>

所以这很简单，但我基本上也想要一个复选框。选中后，它应该过滤某个字符串。

jquerymobile 有这个功能吗？我怎样才能做到这一点。 如果我可以根据复选框的选中状态进行过滤+搜索框中的任何内容，那就太好了

【参考方案1】：

选中后，它应该过滤某个字符串。 jquerymobile 有这个功能吗？

是的……

http://api.jquerymobile.com/filterable/

Filterable 小部件的过滤器显示功能可以轻松使用本地数据构建简单的自动完成功能。当 Filterable 小部件用于具有 data-filter-reveal="true" 属性的列表时，当搜索字段为空白时，它将自动隐藏所有列表项。如果您需要搜索一长串值，我们提供了一种使用远程数据源创建过滤器的方法。

<form class="ui-filterable">
    <input id="autocomplete-input" data-type="search" placeholder="Search fruits...">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input" data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>

可过滤小部件可以在任何标签中工作，而不仅仅是 ul/ol 列表视图。查看演示页面，因为它们具有您应该感兴趣的各种不同的方法。由于您使用的是listview，请务必执行

$("#residentList").listview("refresh); 

在您进行更改/更新之后。