JQuery 具有多个过滤器的移动可过滤列表视图

Question

我有一个 JQM 1.4.2 可过滤列表视图，其中包含不同语言的条目。

我只想在项目代码中搜索，而不是整个描述，因此我将列表项目的数据过滤器文本设置为项目代码，例如"Apple" 或 "Banana"。这工作正常，但现在我需要一个额外的语言过滤器，例如"EN"、"DE"，依此类推：

...
<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>

我现在尝试做的是，当一个复选框被选中时，只有属于该语言的列表项是可见的。

如何将此附加过滤器设置为我的可过滤 jQuery 移动列表视图？

笨蛋：http://plnkr.co/edit/TV6rcatzdvaIvQzWBdoI?p=preview

编辑：

这是最终的解决方案，感谢 EZANKER：https://jsfiddle.net/m64kg5fw/4/

Answer 1

作为 filterCallback 的可过滤小部件属性：http://api.jquerymobile.com/filterable/#option-filterCallback

您可以使用它来编写一个函数来检查文本和选中的语言复选框。

$(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;
}

已更新DEMO

checkedOrMatch 函数针对列表中的每个项目运行。它首先测试输入的搜索文本是否在过滤器文本中找到。如果是，它会查看选中了哪些语言按钮并测试该语言的项目。如果用户在键入搜索条件后选择语言按钮，我还添加了代码以重新触发过滤器。

注意：如果用户键入 "lang"，您可能得不到您想要的内容...在这种情况下，您可以将语言名称从过滤器文本中移出并移至单独的数据属性中。

JQuery 具有多个过滤器的移动可过滤列表视图

JQuery Mobile filterable listview with multiple filters

jquery-mobile

jquery-mobile-listview

已更新DEMO