Question

我正在使用jQuery和Phonegap创建一个Android和iOS应用程序，其中一节旨在帮助用户找到日本地区的地图别针。这些引脚分为类别和子类别（例如，US Bases＆gt;＆gt; Army，Navy，Marine或Air Force）。我想为用户提供一个屏幕，可以通过常规文本输入字段和选择/下拉菜单使用listview中的图钉进行过滤（请参见下图;相关代码也在这篇文章的结尾）。

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

我希望用户能够通过EITHER关键字（文本字段）或按类别（下拉列表）进行过滤。但是，它显示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已将其插入<a>标记中，其类别为 ui-collapsible-heading-toggle

enter image description here

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

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/

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

1 个答案: