jQuery Mobile 多重过滤方法 - 文本/输入和选择/下拉

Question

我正在使用 jQuery 和 Phonegap 创建一个 Android 和 iOS 应用程序，其中一个部分旨在帮助用户找到日本位置的地图图钉。这些图钉分为类别和子类别（例如美国基地>>陆军、海军、海军陆战队或空军）。我想为用户提供一个屏幕，该屏幕能够通过常规文本输入字段和选择/下拉菜单使用listview 中的引脚进行过滤（见下图；最后还提供了相关代码这篇文章的）。

可以在此处找到屏幕截图：http://jefflofting.com/zamavcf/screenshot.png

我希望用户能够按关键字（文本字段）或类别（下拉菜单）进行过滤。但是，data-input: 似乎只允许输入一个过滤器 ID。

我有什么选择吗？我考虑过的其他事情是使过滤器使用文本字段并设置下拉菜单以自动将所选选项的 t 值输入该字段以使其过滤。虽然我发现了一个使用复选框的变体，并成功地将复选框选择输入到文本字段中，但它并没有启动过滤器......它只是将值放在字段中。我的 Javascript 技能根本无法将 Javascript 切换到选择菜单并解决非过滤问题。

提前致谢！

<div class="contactdetailstitle">SEARCH BY KEYWORD</div>
<!--Filter by text field-->
<form class="ui-filterable" style="margin-top:-25px;">
    <input id="filterBasic-pinsword" data-type="search" placeholder="search by keyword" name="filterBasic-pinsword">
</form>
<div class="contactdetailstitle" style="margin-top:10px;">SEARCH BY CATEGORY</div>
<!--Filter by drop-down-->
<form style="margin-top:-6px; margin-bottom:25px;">
    <select id="filterBasic-pinscat" data-native-menu="false" name="filterBasic-pinsword">  
        <option class="filterbycat" value=" ">Show All Categories</option>
        <option value="Family Parks">Family Parks</option>
        <option value="Theme Parks">Theme Parks</option>
    </select>
</form>
<ul data-role="listview" data-autodividers="false" data-filter="true" data-input="#filterBasic-pinscat">
    <li data-icon="false" data-filtertext="Family Parks"><a href="#">We Are Family Park</a></li>
    <li data-icon="false" data-filtertext="Theme Parks"><a href="#">The Cosplay Park</a></li>
</ul>

Answer 1

一种简单的方法是搜索关键字并隐藏任何不匹配的内容。

演示

http://jsfiddle.net/tk27L2es/

示例列表项在我们插入关键字的范围内，我们也将这些隐藏在视图之外

<li><span id="hide">themepark</span>Galaxyland</li>
<li><span id="hide">themepark</span>Playland</li>
<li><span id="hide">themepark</span>Magic Mountain Water Park</li>
<li><span id="hide">familypark canada</span>Canada's Wonderland</li>
<li><span id="hide">familypark renfrew</span>Storyland</li>

我们还创建另一个列表供用户选择想要搜索的关键字

    <li id="all">All</li>
    <li id="themeparks">Theme Parks</li>
    <li id="familyparks">Family Parks</li>
    <li id="renfrew">Renfrew Theme Parks</li>
    <li id="canada">Canada Theme Parks</li>

css

#hide {
display:none;
}

Jquery选择关键字后，匹配关键字并从列表中删除其余关键字

var cat;

$(document).on("click", "#cats >li", function (event, ui) {
    cat = $(this).closest("li").attr('id');

    if (cat == "all") {
        $('#filterlist li').show();
    } else {
        $('#filterlist li:contains(' + cat + ')').show();
        $('#filterlist li:not(:contains(' + cat + '))').hide();
    }

    $("#mylistitems").collapsible("collapse");
});

理想情况下，如果您有很多项目，您想最小化 HTML 文档中的数据，因此对于关键字，您可以分配一个字母和一个数字并匹配这些项目。

例如

A1 = 主题公园

A2 = 家庭公园...等等

对于在单击时动态更新选择标题，在浏览器中检查元素将显示 JQM 已将其插入到带有 ui-collapsible-heading-toggle 类的 <a> 标记中p>

因此，动态更改标题的一种简单方法是从列表选择项中获取文本并使用该类将其插入到标题中。

ch  = $(this).closest("li").text()  
$(".ui-collapsible-heading-toggle").text(ch)

演示

http://jsfiddle.net/986q9fy4/

对于下拉菜单，您将使用几乎相同的代码，但带有一个 -- on change -- 事件，然后获取您选择的选项的值

var cat;

$(document).on("change", "#cats", function (event, ui) {

    cat = $("#cats").val();

    if (cat == "all") {
        $('#filterlist li').show();
    } else {
        $('#filterlist li:contains(' + cat + ')').show();
        $('#filterlist li:not(:contains(' + cat + '))').hide();
    }

    $("#mylistitems").collapsible("collapse");
});

演示

http://jsfiddle.net/9ga9v8py/