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

Question

我正在使用 jQuery 和 Phonegap 创建一个 Android 和 iOS 应用程序，其中一个部分旨在帮助用户找到日本位置的 map 图钉。这些图钉分为类别和子类别(例如美国基地 >> 陆军、海军、海军陆战队或空军)。我想为用户提供一个屏幕，能够通过常规文本输入字段和选择/下拉菜单使用 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/

示例列表项在我们插入关键字的范围内，我们还会将它们隐藏在 View 中

<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 = 家庭公园...等等

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

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

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

演示

http://jsfiddle.net/986q9fy4/

对于下拉列表，您将使用几乎相同的代码，但带有一个“更改时”事件，然后获取您选择的选项的值

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/