如何用jQuery移动的过滤可折叠的集合?

igetnqfo  于 2022-12-03  发布在  jQuery
关注(0)|答案(3)|浏览(126)

我有一个简单的可折叠的集合,我想用一个过滤器来过滤,这个过滤器将显示在集合的上方。所需的结果是只查看与我的搜索匹配的项目(而不是项目所在的整个可折叠块)。
请建议如何处理此任务...

<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>
jogvjijk

jogvjijk1#

您可以将data-role="collapsible"元素放在data-role="listview"元素的list-items中,该元素可以具有data-filter="true"属性以自动创建筛选搜索输入。以下是一个示例:

<ul data-role="listview" data-filter="true" id="outer-ul">
        <li>
            <div data-role="collapsible" data-content-theme="c">
                <h3>Firs Collapsed list</h3>
                <ul>
                    <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>
        </li>
    </ul>

下面是一个演示:http://jsfiddle.net/Awg8W/2/
请注意,您必须处理一些CSS问题。其中之一是内部data-role="listview"元素会创建多个搜索输入。我用此CSS隐藏了除第一个之外的所有内容:

#page .ui-listview-filter:nth-child(n+2) {
    display : none;
}​

更新

然后可以使用以下jQuery代码复制折叠效果:

//wait for page to initialize
$(document).on('pageinit', '#page', function () {

    //find the headings we want to watch
    $(this).find('#outer-ul').find('.ui-collapsible-heading').on('click', function () {

        //cache the parent collapsible widget
        var that = $(this).closest('.ui-collapsible')[0];

        //collapse all other collapsible widgets
        $(this).closest('ul').find('.ui-collapsible').filter(function () {

            //filter-out the collapsible widget that got clicked, so it functions
            return this !== that;
        }).trigger('collapse');

        //since we are messing around with the listview widget, let's refresh it
        $(this).closest('ul').trigger('refresh');
    });
});​​
kpbpu008

kpbpu0082#

我知道这个问题有点老了,但我也遇到过同样的问题。我找到了一个解决方案,不需要编写JavaScript或CSS。我希望这对其他有这个问题的人有用。jsfiddle
编辑:An update using nested lists

<div data-role="page" id="page">
    <div data-role="content">
        <h1>Collapsible set with search</h1>
        <div data-role="collapsible-set" data-filter="true">
            <div data-role="listview" data-inset="true" data-filter="true">
                <div data-role="collapsible">
                    <h1>Numero uno</h1>
                    <div>some text</div>
                </div>
                <div data-role="collapsible">
                    <h1>Number two</h1>
                    <div>some text</div>
                </div>
            </div>
        </div>
    </div>
</div>
ldxq2e6h

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
在演示中,我添加了一个空列表,使其位于可折叠组的顶部,但如果该列表不为空,它也将筛选自己的项目。
希望能帮上忙。

**注意:**这个解决方案并不完美,但我只是想尽快完成。一个更好的解决方案是创建一个“搜索字段小部件”,以避免空列表的需要,但它需要更多的编码。

相关问题