JQM ListView Filter - 2

Does not hide autoDividers with no matching children and shows indicator text instead.

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");
        //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");
            var defaultFilterCallback = function(text, searchValue, item) {
                return text.toString().toLowerCase().indexOf(searchValue) === -1;
            };
            var list = $(this),
                listview = list.data("mobile-listview");

            if (!listview || !listview.options.filter) {
                return;
            }

            if (listview.options.filterReveal) {
                list.children().addClass("ui-screen-hidden");
            }

            var wrapper = $("<form>", {
                "class": "ui-listview-filter ui-bar-" + listview.options.filterTheme,
                    "role": "search"
            }).submit(function(e) {
                e.preventDefault();
                search.blur();
            }),
                onKeyUp = function(e) {
                    var $this = $(this),
                        val = this.value.toLowerCase(),
                        listItems = null,
                        li = list.children(),
                        lastval = $this.jqmData("lastval") + "",
                        childItems = false,
                        childItemsCount = 0,
                        itemtext = "",
                        item,
                        // Check if a custom filter callback applies
                        isCustomFilterCallback = listview.options.filterCallback !== defaultFilterCallback;

                    if...

CSS

/*Below is just for laying out correctly in JSFiddle*/
 .ui-listview-filter {
    margin: 2em 0 0.5em;
}
.ui-listview {
    margin: 0.5em;
}
.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;
}