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

Question

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

我只想在项目代码中搜索，而不是整个描述，我将列表项目的 data-filtertext 设置为项目代码，例如“苹果”或“香蕉”。 这工作正常，但现在我需要一个额外的语言过滤器，例如“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 Mobile 列表视图？

Plunker：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”，您可能无法得到您想要的……在这种情况下，您可以将语言名称从过滤器文本中移出并移到单独的数据属性中。