jQuery Mobile data-filter, in case of no result

Question

I\'m currently exploring jQuery Mobile to develop a mobile version of a dashboard with ordertracking information. And what the plan is, is to use a simple unordered list with al

Answer 1

//wait to do event binding until the page is being initialized
$(document).delegate('[data-role="page"]', 'pageinit', function () {

    //cache the list-view element for later use
    var $listview = $(this).find('[data-role="listview"]');

    //delegate event binding since the search widget is added dynamically
    //bind to the `keyup` event so we can check the value of the input after the user types
    $(this).delegate('input[data-type="search"]', 'keyup', function () {

        //check to see if there are any visible list-items that are not the `#no-results` element
        if ($listview.children(':visible').not('#no-results').length === 0) {

            //if none are found then fadeIn the `#no-results` element
            $('#no-results').fadeIn(500);
        } else {

            //if results are found then fadeOut the `#no-results` element which has no effect if it's already hidden
            $('#no-results').fadeOut(250);
        }
    });
});​

Here is a demo: http://jsfiddle.net/6Vu4r/1/

Answer 2

Thank you

I'm using this code with an extension. I don't want to write each time this #no-result li.

$(document).delegate('[data-role="page"]', 'pageinit', function() {

var $listview = $(this).find('[data-role="listview"]');
$listview.append('<li id="no-results" style="display:none;">[No results found]</li>');
$listview.listview('refresh');
$(this).delegate('input[data-type="search"]', 'keyup', function() {
    if ($listview.children(':visible').not('#no-results').length === 0) {
        $('#no-results').fadeIn(500);
    } else {
        $('#no-results').fadeOut(250);
    }
});
});

Answer 3

If you use @Jasper's code on a list with auto-dividers you might find that the hidden "no results" element stills creates a divider. To avoid that I used this code:

if ($listview.children(':visible').not('#no-results').length === 0) {

        // if none are found then fadeIn the `#no-results` element
        $('#no-results').fadeIn(500);

    } else {

        // if results are found then fadeOut the `#no-results` element which
        // has no effect if it's already hidden
        $('#no-results').fadeOut(250);
        $listview.children('.ui-li-divider:visible').not('#no-results').each(function()             {
            if($(this).next("#no-results").length > 0)
                $(this).hide();
        });
    }

If anyone has a better solution please share.