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

【问题标题】：display "no results found" after search搜索后显示“未找到结果”
【发布时间】：2013-04-11 19:19:51
【问题描述】：

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

一个简单的例子：从“Geographic Focus”菜单中选择“Bangladesh”，在“Spending Type”菜单中选择“Sponsorship”，然后点击提交。你会得到一个空白页。

【问题讨论】：

我用工作代码更新了我的答案，用我的解决方案更新了你的小提琴。

标签： jquery jquery-selectors

【解决方案1】：

正如我在您的 html 中看到的，所有可能的结果都有一个 .item 类。因此，如果没有 .item 显示，则意味着该打印“未找到结果”。您可以在 jQuery 中实现这一点：

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

【讨论】：

感谢您的宝贵建议，弗里曼。你和亚历克斯男爵都为我节省了很多时间。

【解决方案2】：

您可以添加检查以查看有多少列表元素可见。

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

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

【讨论】：

非常感谢，亚历克斯男爵。这正是我想要的。
没问题！不要忘记接受其中之一作为您问题的答案。

【解决方案3】：

我觉得这样更好

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

【讨论】：

问题是他附加了所有这些选择器，所以只会显示所有这些选择器的东西 - 这是一个错误。

【解决方案4】：

尝试改变

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

看起来您的问题是您附加了所有这些选择器，因此只会显示具有所有这些选择器的内容。因此，我在选择器之间添加了逗号。

【讨论】：

谢谢你，扎卡里。我一定会试试这个。
不用担心 :) 如果您有任何困难/问题，请告诉我。