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 all orders, and people can click on the link they want to know more about. Because this list can become quite large, it is nice to have a filter ability which it's easy to do with jQuery Mobile.

Just something like this:

<ul data-role="listview" data-filter="true">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>

data-filter="true" takes care of displaying a searchbar and it actually works pretty nice.

But my only problem is, when nothing is found, it just displays nothing, and I would like there to be a bit of text saying something like "Sorry, no orders where found."

Does anybody know if this is possible with jQuery Mobile, or is it something that has to be coded from scratch?

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