Bộ lọc dữ liệu di động jQuery, trong trường hợp không có kết quả

Question

Tôi hiện đang khám phá jQuery Mobile để phát triển phiên bản di động của trang tổng quan có thông tin về thứ tự. Và kế hoạch là gì, là sử dụng một danh sách đơn giản không có thứ tự với tất cả các đơn đặt hàng và mọi người có thể nhấp vào liên kết mà họ muốn biết thêm. Vì danh sách này có thể trở nên khá lớn, nên có khả năng lọc dễ dàng với jQuery Mobile.

Chỉ cần một cái gì đó như thế này:

<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" chăm sóc hiển thị một thanh tìm kiếm và nó thực sự hoạt động khá tốt đẹp.

Nhưng vấn đề duy nhất của tôi là, khi không có gì được tìm thấy, nó chỉ hiển thị không có gì, và tôi muốn có một chút văn bản nói điều gì đó như "Xin lỗi, không có đơn đặt hàng nào được tìm thấy".

Có ai biết nếu điều này là có thể với jQuery Mobile, hoặc là nó một cái gì đó đã được mã hóa từ đầu?

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

Đây là một bản demo: http://jsfiddle.net/6Vu4r/1/

Answer 2

Cảm ơn bạn

Tôi đang sử dụng mã này với một phần mở rộng. Tôi không muốn viết mỗi lần li không kết quả # này.

$(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

Nếu bạn sử dụng mã của Jasper trong danh sách có dấu phân cách tự động, bạn có thể thấy phần tử "không có kết quả" bị ẩn tạo dải phân cách. Để tránh điều đó, tôi đã sử dụng mã này:

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

Nếu có giải pháp tốt hơn, vui lòng chia sẻ.