Question

我正在探索jQuery Mobile，以开发带有ordertracking信息的仪表板的移动版本。计划的目的是使用包含所有订单的简单无序列表，人们可以点击他们想要了解的更多链接。因为这个列表可能变得非常大，所以拥有一个使用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/

Answer 2

谢谢

我正在使用带有扩展名的代码。我不想每次都写这个#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

如果在带有自动分隔符的列表中使用@Jasper的代码，您可能会发现隐藏的“无结果”元素仍会创建分隔符。为了避免这种情况，我使用了这段代码：

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

如果有人有更好的解决方案，请分享。

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

3 个答案: