带有多个过滤器的JQuery Mobile可过滤列表视图 [英] JQuery Mobile filterable listview with multiple filters
问题描述
我有一个JQM 1.4.2可过滤列表视图，其中包含不同语言的条目.
I have a JQM 1.4.2 filterable listview which contain entries in different languages.
我只想在商品代码中搜索，而不是在整个描述中搜索，因此我将列表商品的数据过滤器文本设置为商品代码，例如苹果"或香蕉". 可以，但是现在我需要一个附加的语言过滤器，例如"EN"，"DE"，等等:
I would like to search only within items code, not the whole description, whereby i set the data-filtertext for list items to the item code, e.g. "Apple" or "Banana". This works ok but now i need an additional language filter, e.g. "EN", "DE", and so on:
...
<li data-filtertext="Apple language_en">
<h2>Title</h2>
<p>Red fruit</p>
<p class="ui-li-aside"><strong>EN</strong></p>
</li>
...
...
<li data-filtertext="Banana language_de">
<h2>Titel</h2>
<p>Beschreibung</p>
<p class="ui-li-aside"><strong>DE</strong></p>
</li>
...
这是我的数据输入:
<form class="ui-filterable">
<div class="ui-grid-a">
<div class="ui-block-a">
<input id="descriptions-input" data-type="search" placeholder="Search..." />
</div>
<div class="ui-block-b">
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="lang-en" id="lang-en" type="checkbox" data-mini="true">
<label for="lang-en">EN</label>
<input name="lang-de" id="lang-de" type="checkbox" data-mini="true">
<label for="lang-de">DE</label>
<input name="lang-fr" id="lang-fr" type="checkbox" data-mini="true">
<label for="lang-fr">FR</label>
</fieldset>
</div>
</div>
</form>
我现在做，是在选择一个复选框，只属于该语言列表项是可见的.
What i try to do now, is that when a checkbox is selected, only the list items belonging to that language are visible.
如何将这个额外的过滤器设置为可过滤的jQuery Mobile列表视图?
How can i set this additional filter to my filterable jQuery Mobile listview?
柱塞: http://plnkr.co/edit/TV6rcatzdvaIvQzWBdoI?p=preview
这是最终的解决方案，这要感谢EZANKER: https://jsfiddle.net/m64kg5fw/4/
This is the final solution, thanks to EZANKER: https://jsfiddle.net/m64kg5fw/4/
推荐答案
The filterable widget as a filterCallback property: http://api.jquerymobile.com/filterable/#option-filterCallback
您可以使用它来编写一个功能，该功能可以同时检查文本和选中的语言复选框.
You can use this to write a function that checks both the text and which language checkboxes are checked.
$(document).on("pagecreate", "#list-descriptions", function () {
$("#descriptions-list").filterable('option', 'filterCallback', checkedOrMatch);
$("#searchLangs input").on("change", function(){
$("#descriptions-list").filterable("refresh");
});
});
function checkedOrMatch(idx, searchValue) {
var ret = false;
var en = $("#lang-en").is(':checked');
var de = $("#lang-de").is(':checked');
var fr = $("#lang-fr").is(':checked');
var ignoreLang = false;
if (!en && !de && !fr) {
ignoreLang = true;
}
if (searchValue && searchValue.length > 0) {
searchValue = searchValue.toLowerCase();
var filttext = $(this).data("filtertext") || '';
filttext = filttext.toLowerCase();
if (filttext.indexOf(searchValue) < 0) {
ret = true; //filter this one out
} else if (!ignoreLang) {
//found filter text now check language
if ( (filttext.indexOf("language_en") > 0 && !en) || (filttext.indexOf("language_de") > 0 && !de) || (filttext.indexOf("language_fr") > 0 && !fr) ) {
ret = true; //filter this one out
}
}
}
return ret;
}
更新了 演示
checkedOrMatch函数针对列表中的每个项目运行.它首先测试是否在过滤器文本中找到了输入的搜索文本.如果是，它将看到选中了哪些语言按钮并测试该语言的项目.如果用户在输入搜索条件后选择了语言按钮，我还添加了重新触发过滤器的代码.
Updated DEMO
The checkedOrMatch functions runs for each item in the list. It first tests if the entered search text is found in the filter text. If it is, it then sees which language buttons are checked and tests the item for that language. I also added code to re-trigger the filter if the user selects language buttons after typing the search criteria.
注意:如果用户输入"lang"，则可能无法获得所需的信息...在这种情况下，您可以将语言名称从过滤器文本移到单独的数据属性中.
NOTE: if the user types in "lang" you might not get what you want... In that case you could move the language designation out of the filter text and into a separate data-attribute.
这篇关于带有多个过滤器的JQuery Mobile可过滤列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
