设置一个自定义过滤器,从搜索条件中排除列表项标题
Setting a custom filter that will exclude the list item titles from the search criteria
此代码(我从一本书中获取的)将对仅搜索 body 副本的列表视图应用过滤器,从搜索条件
中排除列表项标题
<body>
<div data-role=”page” id=”MY-page”>
<div data-role=”header”>
<h1>Sports</h1>
</div>
<div data-role=”content”>
<ul data-role=”listview” data-filter=”true”>
<li>Football</li>
<li>Basketball</li>
<li>Tennis</li>
<li>Volleyball</li>
</ul>
<!-- etc. -->
</body>
$(document).bind("mobileinit", function() {
$.mobile.listview.prototype.options.filterCallback = onlyBody;
});
function onlyBody(text, searchValue) {
var splitText = text.trim().split("\n");
console.log(" text: "+ splitText[1]);
return splitText[1].toLowerCase().indexOf( searchValue ) === -1;
};
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,””);
}
我没看懂这段代码
return splitText[1].toLowerCase().indexOf( searchValue ) === -1;
我知道 indexOf
returns 是一个数字,表示指定的 searchvalue
第一次出现的位置,如果从未出现,则为 -1
===
运算符 return 是一个布尔值。为什么我们要 return 布尔值?
此外,在关闭 body 标签之前将此代码放入脚本标签后,我没有注意到 jQuery Mobile 中的默认过滤器发生了变化。我怎样才能确保这段代码工作正常?
将其分解为每个步骤:
splitText[1]
Returns splitText
数组的 second 元素(因为数组索引从零开始)
.toLowerCase()
数组的值是一个字符串,这将该值转换为完全小写。
.indexOf(searchValue) === -1;
indexOf()
在调用它的 string/array 中查找给定值,并且 returns 它在字符串中的位置作为整数。这个整数是匹配的起始索引。如果未找到匹配项 returns -1
。
return splitText[1].toLowerCase().indexOf(searchValue) === -1;
将所有内容放在一起,如果 searchValue
not 在 [= 的第二项中找到,则这行代码将返回 true
14=]数组。
遗憾的是,您没有向我们展示足够的代码来了解返回此布尔值的原因或如何使用它。为此,您需要检查 listView 中的逻辑以了解如何使用 $.mobile.listview.prototype.options.filterCallback
值。
我找到了问题的答案:为什么我们要 return 布尔值?
要设置将成为所有可过滤小部件的新默认值的自定义过滤功能,请覆盖 "mobileinit" 信号处理程序中可过滤小部件原型中的 filterCallback 选项:
$( document ).one( "mobileinit", function() {
$.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
// In this function the keyword "this" refers to the element for which the
// code must decide whether it is to be filtered or not.
// A return value of true indicates that the element referred to by the
// keyword "this" is to be filtered.
// Returning false indicates that the item is to be displayed.
//
// your custom filtering logic goes here
});
});
此代码(我从一本书中获取的)将对仅搜索 body 副本的列表视图应用过滤器,从搜索条件
中排除列表项标题<body>
<div data-role=”page” id=”MY-page”>
<div data-role=”header”>
<h1>Sports</h1>
</div>
<div data-role=”content”>
<ul data-role=”listview” data-filter=”true”>
<li>Football</li>
<li>Basketball</li>
<li>Tennis</li>
<li>Volleyball</li>
</ul>
<!-- etc. -->
</body>
$(document).bind("mobileinit", function() {
$.mobile.listview.prototype.options.filterCallback = onlyBody;
});
function onlyBody(text, searchValue) {
var splitText = text.trim().split("\n");
console.log(" text: "+ splitText[1]);
return splitText[1].toLowerCase().indexOf( searchValue ) === -1;
};
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,””);
}
我没看懂这段代码
return splitText[1].toLowerCase().indexOf( searchValue ) === -1;
我知道 indexOf
returns 是一个数字,表示指定的 searchvalue
第一次出现的位置,如果从未出现,则为 -1
===
运算符 return 是一个布尔值。为什么我们要 return 布尔值?
此外,在关闭 body 标签之前将此代码放入脚本标签后,我没有注意到 jQuery Mobile 中的默认过滤器发生了变化。我怎样才能确保这段代码工作正常?
将其分解为每个步骤:
splitText[1]
Returns splitText
数组的 second 元素(因为数组索引从零开始)
.toLowerCase()
数组的值是一个字符串,这将该值转换为完全小写。
.indexOf(searchValue) === -1;
indexOf()
在调用它的 string/array 中查找给定值,并且 returns 它在字符串中的位置作为整数。这个整数是匹配的起始索引。如果未找到匹配项 returns -1
。
return splitText[1].toLowerCase().indexOf(searchValue) === -1;
将所有内容放在一起,如果 searchValue
not 在 [= 的第二项中找到,则这行代码将返回 true
14=]数组。
遗憾的是,您没有向我们展示足够的代码来了解返回此布尔值的原因或如何使用它。为此,您需要检查 listView 中的逻辑以了解如何使用 $.mobile.listview.prototype.options.filterCallback
值。
我找到了问题的答案:为什么我们要 return 布尔值?
要设置将成为所有可过滤小部件的新默认值的自定义过滤功能,请覆盖 "mobileinit" 信号处理程序中可过滤小部件原型中的 filterCallback 选项:
$( document ).one( "mobileinit", function() {
$.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
// In this function the keyword "this" refers to the element for which the
// code must decide whether it is to be filtered or not.
// A return value of true indicates that the element referred to by the
// keyword "this" is to be filtered.
// Returning false indicates that the item is to be displayed.
//
// your custom filtering logic goes here
});
});