Jquery mobile 自动打开筛选的可折叠集合项-Jquery mobile

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

我希望能够在筛选框中输入一个单词，并在返回匹配的可折叠集合项目时自动打开它们

我在文件里找不到任何对我有帮助的东西。有什么想法吗

JQM最新版本
带搜索的可折叠集
头号人物
一些文本
二号
一些文本
第三名等级：25%（第八名，共128名）
一些土豆
四号
一些文本

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

$(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事件周围设置一个超时。

可筛选小部件有一个事件（

filterablefilter

-），您可以在完成筛选后处理该事件。为了方便起见，我使用数据过滤器为您的div添加了一个id

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

返回的UI对象是一个jQuery对象，其items集合是筛选器处理的可折叠对象的列表。因此，使用

each（）

函数，您可以迭代列表，并根据过滤器是否应用了类

ui screen hidden

设置折叠状态。之后，我删除了

ui屏幕隐藏

类，这样就不会隐藏任何项目。如果您仍然想隐藏项目，只需删除

.removeClass（“ui屏幕隐藏”）

这是一个正在工作的

---

很好的例子，简单而甜蜜；）+回答得好。您也可以使用

.collappable（“expand”）

）对于那些花费数小时试图找出事件为何不会触发的人来说，这是1.4.0中的一个bug，在1.4.1中已经修复。（但找不到错误报告。）

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

$(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");

        });
    });
});