jQuery Mobile 数据过滤器，在没有结果的情况下答案

【问题标题】：jQuery Mobile data-filter, in case of no resultjQuery Mobile 数据过滤器，在没有结果的情况下
【发布时间】：2012-03-29 23:10:05
【问题描述】：

我目前正在探索 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 是否可以做到这一点，还是必须从头开始编写代码？

【问题讨论】：

检查$('ul[data-role="listview"] > li').size() < 1 可能吗？如果没有内置函数是
@Johan，谢谢，我一直在考虑类似的事情，但首先想确保不存在内置函数。因为您可以使用一个数据属性来获取搜索栏，您可以使用一个属性更改占位符，所以我认为更改“无结果案例”也不是问题。
好的，听起来它应该存在类似的东西，我想你将不得不等待，看看是否有比我更了解它的人回答。至少你现在有一个备份计划:)

标签： jquery search mobile jquery-mobile

【解决方案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/

【讨论】：

好的，看起来效果不错。所以没有真正的内置选项......嗯，好吧。顺便说一句，您是否注意到，一旦您到达找不到结果的地步，您输入 #no-results 元素的下一个字母将再次淡出，下一个字母再次淡入，等等。
@Crinsane 我认为使用.not(this) 会从选择中省略#no-results 元素，但我不得不将其更改为.not('#no-results')。我更新了我的答案，这是新的演示：jsfiddle.net/6Vu4r/1
我在看这篇文章。 @Jasper 我确实发现当我们单击搜索栏中的 x 时，“无结果”ID 会在列表视图中返回。有没有办法解决这个问题？第一次我想我应该阅读更多关于 jQM-data-filters 中 x 按钮的工作原理的信息，但后来我发现了另一种方式：我们也可以在点击页面refresh x，需要一些见解..
@uDaY 如果您设置了一个超时来隐藏#no-results 元素，您可以在动画开始后将其隐藏。这是一个演示：jsfiddle.net/6Vu4r/2
@uDaY 我已经添加了修改。请检查一下。 jsfiddle.net/6Vu4r/39

【解决方案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);
    }
});
});

【讨论】：

【解决方案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();
        });
    }

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

【讨论】：