jQuery 移动多重过滤方法 - text/input 和 select/drop-down

Question

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

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

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

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

提前致谢！

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

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

动态更改标题的一种简单方法是从列表选项中获取文本，然后使用 class 将其插入 header。

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

演示

http://jsfiddle.net/986q9fy4/

对于下拉菜单，您将使用几乎相同的代码，但使用 -- on change -- 事件，然后获取您 select

选项的值

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/

jQuery 移动多重过滤方法 - text/input 和 select/drop-down

jQuery Mobile Multiple Filter Methods - text/input and select/drop-down

html

javascript

filter

jquery-mobile

cordova