自动打开已过滤的可折叠设置项目 - jquery mobile

问题描述：

我创建了一个简单的页面，它有一个应用于可折叠设置项目的jquery数据过滤器（请参阅下面的jsfiddle和代码）。可折叠的设置项目最初是关闭的。自动打开已过滤的可折叠设置项目 - jquery mobile

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

我无法在文档中找到任何帮助我的文档。有任何想法吗？

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

答

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

<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

很好的例子，简单的和甜的）+1 –

很好的回答。你也可以使用'.collapsible（“expand”）'） – Omar

对于花费数小时试图弄清楚为什么事件不会触发的人，这是1.4.0中的一个错误，它在1.4.1中被修复。（虽然找不到错误报告。） – Jayen

答

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

$(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坍塌过滤collapsibles后内部fiter（）事件。也许你必须在keyup事件中设置一个超时。

自动打开已过滤的可折叠设置项目 - jquery mobile

相关推荐