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

【问题标题】：Change default behavior of data-filter in jQuery mobile更改 jQuery mobile 中数据过滤器的默认行为
【发布时间】：2012-08-13 20:32:56
【问题描述】：

我有一个带有data-filter="true" 属性的无序列表。过滤框为空时如何隐藏列表项？我应该覆盖默认的列表视图行为吗？怎么样？

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

提前谢谢...

【问题讨论】：

标签： jquery listview jquery-mobile

【解决方案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");
        }
    });

【讨论】：