Question

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

我想只搜索商品代码，而不是整个描述，我将列表商品的数据文件设置为商品代码，例如：＆＃34;苹果＆＃34;或＆＃34;香蕉＆＃34;。这工作正常，但现在我需要一个额外的语言过滤器，例如＆＃34; EN＆＃34;，＆＃34; DE＆＃34;等等：

...
<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”，您可能无法得到您想要的内容......在这种情况下，您可以将语言指定移出过滤器文本并转换为单独的数据属性。

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

1 个答案:

更新了 DEMO