JQuery ListView 多个项目

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
        }
    });