如何使用 jQuery Mobile 过滤可折叠集？

Posted 2023-05-09

技术标签:

【中文标题】如何使用 jQuery Mobile 过滤可折叠集？【英文标题】：How to filter collapsible set with jQuery Mobile? 【发布时间】：2012-08-10 02:30:08 【问题描述】：

我有一个简单的可折叠集合，我想使用单个过滤器进行过滤，该过滤器将显示在集合上方。期望的结果是只看到与我的搜索匹配的项目（而不是项目出现的整个可折叠块）。

请告知如何处理此任务...

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

【问题讨论】：

【参考方案1】：

您可以将data-role="collapsible" 元素放在列表项中的data-role="listview" 元素中，该元素可以具有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');
    );
);

【讨论】：

首先非常感谢，但这并不是我想要的。此代码过滤可折叠块，例如，如果我在搜索框中键入“ac”，将显示两个第一个可折叠块，其中包含所有项目，我希望结果只有 2 个列表项，讴歌和凯迪拉克。有什么想法吗？【参考方案2】：

我知道这个问题有点老了，但我遇到了同样的问题。我找到了一个不需要编写 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>

【讨论】：

【参考方案3】：

这个问题有点老了，但是当我今天遇到同样的问题时，这里是我的解决方法的演示：http://jsfiddle.net/2Vg4z/。

所以，关于 JS，我只是从原始 listview filter 复制/粘贴代码并对其进行了一些修改，以便它可以应用于多个列表视图。

将创建搜索字段的 ul 必须设置 2 个属性：

data-x-filter，像 data-filter 这样的布尔值 id，能够识别搜索字段

必须被此搜索字段过滤的其他ul必须设置1个属性：

data-x-filter-id，之前设置的id

要使用它，只需从 this pastebin 复制/粘贴 jsfiddle 中的代码！

在演示中，我添加了一个空列表以将其放在可折叠组的顶部，但如果列表不为空，它也会过滤自己的项目。

希望对你有帮助。

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