Question

通过反复试验，我发现此解决方案不适用于jQuery Mobile 1.4.3（JSFiddle to prove it）。

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    var $listview = $(this).find('[data-role="listview"]');
    $(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 1

一种迂回的方式是实际记录隐藏的列表项目数量，并与首先列出的项目数量进行比较。

<强>演示

http://jsfiddle.net/q6w41v6g/

使用第二个列表视图使用fadein效果进行演示，但不附加到listview

http://jsfiddle.net/9Lmmz654/

<div data-role="page">
    <div data-role="content">
        <ul data-role="listview" id="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>
    </div>
</div>

var lisize = $("#listview li").size();
var timer = null;
$(document).on('keydown', '.ui-input-search', function(){
    $('#notfound').remove();
       clearTimeout(timer); 
       timer = setTimeout(checklist, 500)
});

function checklist() {
var count = $('#listview li').size() - $('#listview li.ui-screen-hidden').size();

if(count<1)
{
    var additem   = $("<li id='notfound'><a style='text-align:center;background-color: #f6f6f6;border-color: grey;color: #333;text-shadow: 0 1px 0 #f3f3f3;'>No Results Found</a></li>");    

additem.appendTo("#listview");

    }
    else { 

    $('#notfound').remove();
   }
  }

Answer 2

可过滤的小部件提供了一个在过滤后触发的事件，因此您不需要搜索框上的keyup事件（对于演示，我已经为UL元素指定了List的id）：

$(document).on('pagecreate', '#page1', function () {
    $("#theList").on( "filterablefilter", function( event, ui ) {
        if ($(this).children(':visible').not('#no-results').length === 0) {
            $('#no-results').removeClass("ui-screen-hidden").fadeIn(500);
        } else {
            $('#no-results').addClass("ui-screen-hidden").fadeIn(250);
        }
    });    
});

使用on（）代替delegate（）。此外，jQM 1.4通过应用类ui-screen-hidden隐藏元素，因此在方法中您需要添加和删除该类。

更新了 FIDDLE

Answer 3

我认为通过CSS解决这个问题也很有意思，无需编写JavaScript / JQuery代码和使用JS处理程序。我们可以添加带有必要文本的div并将其放在列表项后面。因此，它始终位于页面上，但只有在前面没有列表项时才会显示。

一个简单的实现包括两部分：

<强> CSS ：

div.no-results
{
    position: absolute;
    top: 80px;
}

HTML （将列表包装到一个块元素中，并在列表前放置一个带标签的div）：

<div data-role="content">
   <div class="no-results" >No results found.</div>
   <ul.....

看看示例：FIDDLE

如果没有结果jQuery Mobile 1.4.3显示消息

3 个答案: