我有一个简单的可折叠的集合,我想用一个过滤器来过滤,这个过滤器将显示在集合的上方。所需的结果是只查看与我的搜索匹配的项目(而不是项目所在的整个可折叠块)。
请建议如何处理此任务...
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-content-theme="c">
<h3>Firs Collapsed list</h3>
<ul data-role="listview" data-inset="false" data-theme="d">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
</ul>
</div>
<div data-role="collapsible" data-content-theme="c">
<h3>Second Collapsed list</h3>
<ul data-role="listview" data-inset="false" data-theme="d">
<li><a href="index.html">Cadillac</a></li>
<li><a href="index.html">Chrysler</a></li>
<li><a href="index.html">Dodge</a></li>
</ul>
</div>
<div data-role="collapsible" data-content-theme="c">
<h3>Third Collapsed list</h3>
<ul data-role="listview" data-inset="false" data-theme="d">
<li><a href="index.html">Ferrari</a></li>
<li><a href="index.html">Ford</a></li>
</ul>
</div>
</div><!--/content-primary -->
</div>
3条答案
按热度按时间jogvjijk1#
您可以将
data-role="collapsible"
元素放在data-role="listview"
元素的list-items中,该元素可以具有data-filter="true"
属性以自动创建筛选搜索输入。以下是一个示例:下面是一个演示:http://jsfiddle.net/Awg8W/2/
请注意,您必须处理一些CSS问题。其中之一是内部
data-role="listview"
元素会创建多个搜索输入。我用此CSS隐藏了除第一个之外的所有内容:更新
然后可以使用以下jQuery代码复制折叠效果:
kpbpu0082#
我知道这个问题有点老了,但我也遇到过同样的问题。我找到了一个解决方案,不需要编写JavaScript或CSS。我希望这对其他有这个问题的人有用。jsfiddle
编辑:An update using nested lists
ldxq2e6h3#
这个问题有点老了,但我今天遇到了同样的问题,下面是我的解决方法的演示:http://jsfiddle.net/2Vg4z/。
所以,关于JS,我只是从原始的listview filter复制/粘贴代码,并对其进行了一些修改,以便它可以应用于多个列表视图。
将从中创建搜索字段的
ul
必须设置2个属性:data-x-filter
,一个类似于data-filter
的布尔值id
,以便能够识别搜索字段必须通过此搜索字段筛选的其他
ul
必须设置1个属性:data-x-filter-id
,之前设置的id要使用它,只需从jsfiddle复制/粘贴代码到this pastebin!
在演示中,我添加了一个空列表,使其位于可折叠组的顶部,但如果该列表不为空,它也将筛选自己的项目。
希望能帮上忙。
**注意:**这个解决方案并不完美,但我只是想尽快完成。一个更好的解决方案是创建一个“搜索字段小部件”,以避免空列表的需要,但它需要更多的编码。