搜索后显示“未找到结果”

我是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

搜索后显示“未找到结果”

回答

相关问题