jQuery Mobile 数据过滤器，以防没有结果

Question

我目前正在探索 jQuery Mobile，以开发带有订单跟踪信息的仪表板的移动版本。计划是使用一个包含所有订单的简单无序列表，人们可以单击他们想了解更多信息的链接。 由于此列表可能会变得相当大，因此拥有过滤功能非常好，使用 jQuery Mobile 可以轻松实现这一功能。

就像这样:

<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" 负责显示搜索栏，它实际上工作得很好。

但我唯一的问题是，当没有找到任何内容时，它只是显示任何内容，并且我希望有一些文字说“抱歉，没有找到订单。”

有人知道这对于 jQuery Mobile 是否可行，或者是否必须从头开始编码？

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

这是一个演示:http://jsfiddle.net/6Vu4r/1/