JQM ListViews One Filter

One search box for 2 listviews

by nirmaljpatel

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script>
    $(document).bind("mobileinit", function() {
        console.log("Mobile init");

        $.mobile.listview.prototype.refresh = (function(original) {
            return function(x) {
                console.log('Monkey patched listview.refresh');

                var result = original.apply(this, arguments);
                var $list = this.element,
                    listHeader = $list.jqmData("header");

                if (listHeader !== undefined) {
                    $list.parent().find("h3:jqmData(role='list-header')").remove();
                    var header = document.createElement('h3');
                    header.setAttribute('data-' + $.mobile.ns + 'role', 'list-header');
                    header.setAttribute('class', 'ui-listview-header');
                    header.appendChild(document.createTextNode(listHeader));
                    var el = $list[0];
                    console.log(el);
                    el.parentNode.insertBefore(header, el);
                } else {
                    console.log('No header specified.');
                }

                return result;
            };
        })($.mobile.listview.prototype.refresh);

        //Unbind the original handler written in JQMobile
        $.mobile.document.undelegate("ul, ol", "listviewcreate");
        //Bind our new handler which has all the code from original JQM function + customizations for not removing list dividers
        $.mobile.document.delegate("ul, ol", "listviewcreate", function() {
            console.log("Custom Handler for: listviewcreate - autoDiv overriding");
            var defaultFilterCallback = function(text, searchValue, item) {
                return text.toString().toLowerCase().indexOf(searchValue) === -1;
            };
            var list = $(this),
                listview = list.data("mobile-listview");

            if (!listview ||...

CSS

.ui-listview {
    margin: 0.5em;
}
.ui-listview-header {
    margin: 0.5em;
    font-weight: bold;
}
.ui-listview-filter + .ui-listview-header {
    margin-top: 1em;
}
.ui-listview-header ~ .ui-listview {
    margin-top: 1em;
}
.ui-li-divider + li.ui-li {
    // border: solid red 1px;
}
/* Below selector for styling the 'No matches' line item */
[data-role='list-divider-no-result'] {
    // border: solid red 1px;
    font-size: 0.75em;
}
/* Specific styling for list-level 'No matches' element on second list */
 #list2 [data-role='list-divider-no-result'] {
    font-size: 1em;
    border: solid red 1px;
}
/* Hide the search box of the second list */
 #list2 .ui-input-search {
    display: none;
    height: 0;
}
/* Below for JSFiddle only */
 #list1, #list2 {
    height: 300px;
    width: 250px;
    overflow-y: scroll;
    display: inline-block;
    padding: 3em 0 0.5em;
}