JQuery ListView multiple items

Question

I need to have 3 jquery mobile listviews on a page (using listviewbeforefilter) controlled by one master text input.

My idea was that I create three normal listviews:

<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>

When the user enters text into the master input it should trigger the three listviews. The sub-listviews need to be in different columns to the $('#MasterBar') input.

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

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

});

It doesn't appear to work at the moment. I can't figure out how to trigger the event.

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

Is this workable or is there a better way to do it?

Answer 1

set a class like test on your listViews and try this code:

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