搜索後顯示「未找到結果」

我是jQuery的新手，但已經能夠使用幾個腳本，我發現可以得到我想要的結果，但有一個例外。我正在處理的頁面有4個下拉菜單，允許用戶從每個菜單中進行選擇，然後單擊一個提交按鈕，該按鈕從列表中返回結果。搜索後顯示「未找到結果」

目前，如果您做了幾個選擇，沒有發現任何東西，只有找到空白頁面。我需要顯示「未找到結果」。我在這裏看到的幾個腳本需要我重寫我擁有的，但我認爲有一個簡單的解決方案。如果沒有，它會回到我的鍵盤。

這裏是的jsfiddle代碼：http://jsfiddle.net/LbUfe/

下面是我使用，使選擇的腳本。

<script type="text/javascript">  
     $(document).ready(function() 
     {    
      $("#btnFilter").click(function() 
      { 
       var portfolio = $("#portfolio").val(); 
       var strategy = $("#strategy").val(); 
       var geoFocus = $("#geoFocus").val(); 
       var spendType = $("#spendType").val(); 
       var portfolioSelector = ''; 
       var strategySelector = '';  
       var geoFocusSelector = ''; 
       var spendTypeSelector = ''; 

       if (portfolio == "all" && strategy == "all" && geoFocus == "all" && spendType == "all")      
       { 
        //show all items in list - working 
        $(".item").show(); 
       } 

       else 
       { 
        if (strategy != "all") 
        { 
         strategySelector = '.' + strategy 
        } 

        if (portfolio != "all") 
        { 
         portfolioSelector = '.' + portfolio 
        } 
        if (geoFocus != "all") 
        { 
         geoFocusSelector = '.' + geoFocus 
        } 
        if (spendType != "all") 
        { 
         spendTypeSelector = '.' + spendType 
        } 
        $(".item").hide(); 
        $(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show(); 
        } 

      }); 

     });

這裏是工作頁面（減去「未找到結果」）。

http://staging.humanityunited.org/

一個簡單的例子：選擇「重點地區」菜單「孟加拉國」和「贊助」的「消費型」菜單，然後點擊提交。你會得到一個空白頁面。

來源

2013-04-11 Chris F

我我的答案更新與工作代碼和你撥弄我的解決方案更新。 – 2013-04-11 19:36:53

你可以添加一個檢查，看看有多少列表元素是可見的。

var visibleElements = $('#colRight li:visible').length;

http://jsfiddle.net/LbUfe/5/

來源

2013-04-11 19:30:56 thealexbaron

非常感謝，thealexbaron。這正是我所期待的。 – 2013-04-11 19:35:05

沒問題！不要忘記接受其中之一作爲你的問題的答案。 – thealexbaron 2013-04-11 19:44:01

正如我可以看到你的HTML，所有可能的結果確實有一個類.item。因此，如果沒有顯示.item，則意味着它打印「未找到結果」的時間。可以在jQuery的做到這一點：

if($('li.item:visible').length===0)) // no item visible 
{ 
    // put code here to display your message 
}

來源

2013-04-11 19:28:35

謝謝你的好建議，弗里曼。你和thealexbaron爲我節省了很多時間。 – 2013-04-11 19:37:36

我的好意Chris – 2013-04-12 11:58:50

嘗試改變

$(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show();

到

var $res = $(strategySelector + "," + portfolioSelector + "," + geoFocusSelector + "," + spendTypeSelector).show(); 
if ($res.length == 0) { 
    $res.html("No results found"); 
} 

$res.show();

（Updated fiddle）

它看起來像你的問題是你，我們重新添加所有這些選擇器，以便只顯示所有這些選擇器的內容。 Ergo，我在選擇器之間添加了一些昏迷。

來源

2013-04-11 19:32:40

謝謝，扎卡里。我一定會嘗試這個。 – 2013-04-11 19:55:15

不用擔心:)如果您有任何困難/問題，請告知我。 – 2013-04-11 19:55:55

我認爲這是更好的

var ItemsCount=$(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show().length; 
if(ItemsCount= 0) 
{ 
    //show your message 
}

來源

2013-04-11 19:37:03 Logar314159

問題是他追加了所有這些選擇器，因此只有所有這些選擇器纔會顯示 - 這是一個錯誤。 – 2013-04-11 19:42:36

搜索後顯示「未找到結果」

回答

相關問題