2

我创建了一个简单的页面，该页面将 jquery 数据过滤器应用于可折叠的集合项目（请参阅下面的 jsfiddle 和代码）。可折叠设置项最初是关闭的。

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

我在文档中找不到任何对我有帮助的东西。有任何想法吗？

http://jsfiddle.net/mikewilsonuk/xpage/

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

2 回答 2

5

可过滤小部件有一个事件（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 对象，其项目集合是过滤器处理的可折叠对象的列表。因此使用该each()函数，您可以迭代列表并根据该类ui-screen-hidden是否已被过滤器应用来设置折叠状态。之后，我删除了ui-screen-hidden该类，以便没有隐藏任何项目。如果您仍然想要隐藏项目，您可以删除.removeClass("ui-screen-hidden").

这是一个有效的FIDDLE

于 2014-03-04T15:13:37.520 回答
0

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

$(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() 事件之后折叠过滤的可折叠项。也许您必须围绕 keyup 事件设置超时。

于 2014-03-04T15:06:06.407 回答