jQuery Mobile数据过滤器，如果没有结果 [英] jQuery Mobile data-filter, in case of no result

问题描述

我目前正在探索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是否可行，还是必须从头开始编写?

解决方案

//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/

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?

解决方案

//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/

这篇关于jQuery Mobile数据过滤器，如果没有结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！