Question

我创建了一个简单的页面，其中有一个应用于可折叠集项的jquery数据过滤器（请参阅下面的jsfiddle和代码）。可折叠的套装项目最初关闭。

我希望能够在过滤器框中输入一个单词，并在返回时自动打开匹配的可折叠设置项吗？

我在文档中找不到任何可以帮助我的内容。有什么想法吗？

<head>
        <title>JQM latest</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="page">
            <div data-role="content">
                <h1>Collapsible set with search</h1>
                <div data-role="collapsible-set" >
                    <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 data-role="collapsible">
                            <h1>Numero three <div>Grade: 25% (8th of 128)</div></h1>
                            <div>some potato</div>
                        </div>
                        <div data-role="collapsible">
                            <h1>Number four</h1>
                            <div>some text</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

Answer 1

可过滤小部件有一个事件（filterablefilter - http://api.jquerymobile.com/filterable/#event-filter），您可以在完成过滤后处理。为方便起见，我使用数据过滤器为您的div添加了一个id。

<div id="filterMe" data-role="listview" data-inset="true" data-filter="true">...

然后在pagecreate上，我添加了事件处理程序：

$(document).on("pagecreate", "#page", function(){
    $("#filterMe").on( "filterablefilter", function( event, ui ) {
        ui.items.each(function( index ) {
              $(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");

        });
    });
});

返回的UI对象是一个jQuery对象，其items集合是过滤器处理的可折叠对象的列表。因此，使用each()函数，您可以迭代列表并根据过滤器是否已应用类ui-screen-hidden来设置折叠状态。之后，我删除ui-screen-hidden类，以便不隐藏任何项目。如果您仍然希望隐藏项目，则可以删除.removeClass("ui-screen-hidden")。

这是一个有效的 FIDDLE

Answer 2

无法完成它，但也许你可以看到我的想法：

$(document).on('keyup',function(){

    var searchtext = $("input[data-type='search']").val();

    var $cols = $(document).find('div[data-role='collapsible']');
    $.each(cols, function(){
        var col = this;

          if(col.find(":contains(searchtext)").length() > 0)
          {
              col.trigger('expand');
          }
          else{
              col.trigger('collapse');
          }
        });
    });
});

问题是，keyup触发过快，jqm在内部fiter（）事件之后折叠过滤的collapsibles。也许你必须在keyup事件周围设置一个超时。

自动打开已过滤的可折叠集项 - Jquery mobile

2 个答案: