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”来阻止过滤项目。

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

3 个答案: