Question

我需要在页面上使用3个jquery移动列表视图（使用listviewbeforefilter），由一个主文本输入控制。

我的想法是我创建了三个普通的列表视图：

<div>
    <input type="text" id="MasterBar">
</div>

<div data-theme="a" class="ui-block-a">
    <ul id="ListResults1" data-filter-theme="b" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Enter Terms..." data-mini="true" data-split-icon="info"  data-theme="a" data-divider-theme="a" data-split-theme="a"></ul>
</div>

<div data-theme="a" class="ui-block-b">
    <ul id="ListResults2" data-filter-theme="b" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Enter Terms..." data-mini="true" data-split-icon="info"  data-theme="a" data-divider-theme="a" data-split-theme="a"></ul>
</div>

<div data-theme="a" class="ui-block-c">
    <ul id="ListResults3" data-filter-theme="b" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Enter Terms..." data-mini="true" data-split-icon="info"  data-theme="a" data-divider-theme="a" data-split-theme="a"></ul>
</div>

当用户在主输入中输入文本时，它应该触发三个列表视图。子列表视图需要位于$('#MasterBar')输入的不同列中。

$(document).ready(function()
{
    //hide all of the input fields
    $('.ui-input-search').hide();

    ('#MasterBar').keyup(function()
                        {
                            $("input[data-type='search']").val(this.value);
                        });

});

目前似乎无效。我无法弄清楚如何触发事件。

$("input[data-type='search']").trigger("listviewbeforefilter");

这是可行的还是有更好的方法呢？

Answer 1

在listViews上设置类似test的类，然后尝试以下代码：

$.expr[':'].containsIgnoreCase = function (e, i, m) {
    return jQuery(e).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

$("#filter")
    .keyup(function () {
        if ($(this).val().length == 0)
            $("ul.test").find("li").show();
        else {
            //hide all the rows
            $("ul.test").find("li").hide();
            //split the current value of searchInput
            var data = $(this).val().split(" ");
            //create a jquery object of the rows
            var jo = $("ul.test").find("li");
            //Recursively filter the jquery object to get results.
            $.each(data, function (i, v) {
                jo = jo.filter("*:containsIgnoreCase('" + v + "')");
            });
            //show the rows that match.
            jo.show();
            //Removes the placeholder text
        }
    });

JQuery ListView多个项目

1 个答案: