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

【问题标题】：jquery mobile: how to prevent the header row of a list view from getting filtered outjquery mobile：如何防止列表视图的标题行被过滤掉
【发布时间】：2013-01-02 17:08:38
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery listview jquery-mobile

【解决方案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，这会中断，但因为我们不会这样做，所以这是一个非常快速的解决方案。

【讨论】：

如果不涉及覆盖jQuery库，这是一个很好的解决方案。
我同意。在我们的用例中，我们从一开始就对 jQuery mobile 进行了大量修改，因此进行这些修改不会破坏交易。

【解决方案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

【讨论】：

我希望他们有一些东西可以默认跳过标题。一些我不知道的魔法数据属性！猜猜这将是唯一的路线。感谢您回电时的复习。
没问题m8，我很乐意提供帮助。
@Gajotres 不知道你为什么说“为回调定义的任何函数都将提供三个参数”而 jQM API 说“该函数接受两个参数”参考：api.jquerymobile.com/listview/#option-filterCallback

【解决方案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" 来防止项目被过滤。

【讨论】：