jquery - jquery mobile：如何防止列表视图的标题行被过滤掉

Question

我正在创建一个 jquery 移动列表视图，可以对其内容进行过滤，如下所示：

<ul data-filter="true" ...>
<li class='thisrowshouldnotbefilteredout'></li>
<li>content to filter on</li>
......
......
</ul>

第一行是我的标题，当用户输入要过滤的文本时，我不希望它隐藏。是否可以为该行提供一个属性，或者我是否必须覆盖基本回调函数以进行拟合？

Answer 1

我采取的另一条路线是实际更改 jQuery Mobile 代码中的一行。

jquery.mobile.1-3.1.js 中的第 6846 行

listItems = list.children( ":not(.ui-screen-hidden)" );

到

listItems = list.children( ":not(.ui-screen-hidden):not(.no-filter)" );

然后只需将“no-filter”类添加到您不想被过滤的任何项目中。

您当然可以使用除类之外的其他逻辑，例如从不过滤第一个孩子，或使用 data-no-filter="true" 属性。

我会说自定义回调显然是首选方法，因为如果您必须重新安装 jQuery mobile，这会中断，但因为我们不会这样做，所以这是一个非常快速的解决方案。

Answer 2

您可以像这样覆盖过滤器逻辑：

$("#mylist").listview('option', 'filterCallback', customSearch);

var customSearch = function(text, searchValue, item) {
    return text.toLowerCase().indexOf( searchValue) === -1;
}

为回调定义的任何函数都将提供三个参数。第一个是当前列表项的文本，第二个是要搜索的值，第三个是要过滤的列表项。真实值将导致隐藏列表项。下面描述了过滤没有 searchValue 作为子字符串的条目的默认回调。

用它来跳过你的标题 li 元素。根据需要修改它。

可以在此处找到示例和更多信息：http: //jquerymobile.com/test/docs/lists/docs-lists.html

Answer 3

您可以添加这样的代码来添加对“data-no-filter”属性的支持：

var origFilter = $.mobile.filterable.prototype.options.filterCallback;
  $.mobile.filterable.prototype.options.filterCallback = function(index, searchValue) {
    var origVal = origFilter.apply(this, arguments);

    if ($(this).attr('data-no-filter') === 'true') {
      return false;
    } else {
      return origVal;
    }
}

然后，在您的 HTML 中，您可以通过在元素上设置 data-no-filter="true" 来防止项目被过滤。