在jQuery Mobile中更改数据过滤器的默认行为

Question

我有一个无序列表，其中包含data-filter="true"属性。 如何在过滤器框为空时隐藏列表项目？ 我应该重写默认的列表视图行为吗？怎么样？

这实际上是一个解决方法，以便在每个可折叠块中过滤带UL的可折叠集。我最终想做的是显示带有隐藏内容的数据过滤器和可折叠集合，因此如果用户选择使用过滤器，应该隐藏可折叠集合，只显示过滤结果。

在此先感谢...

Answer 1

不幸的是，有没有办法覆盖jQuery Mobile的为这个默认行为。你需要在jquery移动代码上添加你的处理。请尝试以下操作：

对于这一点，你需要定义你的样式表如下：

.ui-hidden-component { 
    display: none !important; 
    } 

，并添加以下脚本代码：

$(document).delegate('[data-role="page"]', 'pageinit', 
     function() { 
     var $listview = $(this).find('[data-role="listview"][data-filter="true"]'); 
     $(this).delegate('input[data-type="search"]', 'keyup change', 
      function() { 
      var $this = $(this); 
      if ($this.val() == '') { 
       $listview.children().addClass("ui-hidden-component"); 
      } else { 
       $listview.children().removeClass("ui-hidden-component"); 
      } 
      }); 
     if ($('input[data-type="search"]').val() == '') { 
      $listview.children().addClass("ui-hidden-component"); 
     } 
    });