如果沒有結果，顯示一條消息jQuery Mobile 1.4.3

我試過the solutions to this question無濟於事。如果沒有結果，顯示一條消息jQuery Mobile 1.4.3

通過試驗和錯誤我發現這個解決方案不適用於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); 
     } 
    }); 
});

有沒有人知道另一個解決方案呢？

來源

2014-09-03 flyingfisch

可篩選小部件提供的事件日在被過濾後觸發的，所以你並不需要在搜索框中的keyup事件（在演示中，我已經給了UL元素的thelist的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); 
     } 
    });  
});

而是代表（中），使用上（）。此外，jQM 1.4通過應用ui-screen-hidden類來隱藏元素，因此在該方法中需要添加和刪除該類。

更新FIDDLE

來源

2014-09-04 14:39:56 ezanker

這樣做的迂迴方式是實際記錄隱藏了多少個列表項目，並與首先有多少列表項目進行比較。

演示

http://jsfiddle.net/q6w41v6g/

演示與使用第二列表視圖，沒有追加淡入效果的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(); 
    } 
    }

來源

2014-09-04 01:35:27 Tasos

我覺得這也很有趣，通過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.....

看一看t樣本：FIDDLE

來源

2015-08-25 18:36:22 Gennadiy

如果沒有結果，顯示一條消息jQuery Mobile 1.4.3

回答

相關問題