jQuery Mobile数据filter，如果没有结果

我目前正在探索jQuery Mobile，以开发带有ordertracking信息的仪表板的移动版本。 计划的目的是使用包含所有订单的简单无序列表，人们可以点击他们想要了解的更多链接。 因为这个列表可能变得非常大，所以很容易拥有一个使用jQuery Mobile很容易做到的过滤能力。

就像这样：

 
Item 1
 
Item 2
 
Item 3
 
Item 4
  

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('
[No results found]
'); $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(); }); } 

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