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

Posted 2023-05-09

【中文标题】具有多个过滤器的 JQuery Mobile 可过滤列表视图

【英文标题】：JQuery Mobile filterable listview with multiple filters

【发布时间】：2016-05-26 12:28:50

【问题描述】：

我有一个 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/

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

【讨论】：

对于要应用的复选框过滤器，过滤器文本的长度必须不为零，是否可以更改以使复选框过滤器也“独立”工作？

我喜欢单独的“数据语言”属性的提示。效果很好！

@deblocker 这里是一个不需要搜索任何文本的更新：jsfiddle.net/ezanker/m64kg5fw/2

@deblocker，这里是使用单独的语言属性的更新：jsfiddle.net/ezanker/m64kg5fw/3

此外，将数据属性也添加到列表分隔符解决了当过滤器处于活动状态时列表分隔符消失的问题。顺便说一句，jsfiddle.net/m64kg5fw/4