Jquery 搜索过滤器 - 未找到结果时显示默认消息答案

【问题标题】：Jquery search filter - display default message when no results foundJquery 搜索过滤器 - 未找到结果时显示默认消息
【发布时间】：2013-01-15 13:51:55
【问题描述】：

我目前正在构建一个搜索字段充当过滤器的页面，如下所示：

// Custom case insensitive selector
jQuery.expr[':'].Contains = function(a,i,m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

// Search field filter
var $section = $('section');

$('#search').keyup(function() {
    var input = $(this).val();

    if(input) {
        $section.hide();
        $("section:Contains('"+input+"')").show();
    }
    else {
        $section.show();
    }
});

它工作得很好，但我想解决一个问题。如果在所有现有的<section> 中都找不到输入的字符串，则页面保持空白。

那么我的问题很简单，当过滤器没有找到结果时，如何在我的页面上显示默认消息？类似于简单的<p> 解释“未找到结果”。

只要没有找到字符串，就只显示一次。

感谢您的帮助。

【问题讨论】：

标签： jquery filter message default keyup

【解决方案1】：

我最终做了以下事情：

在列表末尾创建我的错误消息。

<p id="noresults">Error message.</p>

在需要时显示/隐藏它。

// Search field filter
var $section = $('section');
var $noresults = $('#noresults');

$noresults.hide();

$('#search').bind('keyup', function() {
    var input = $(this).val();

    if(input) {
        $section.hide();
        var result = $("section:Contains('"+input+"')");

        if(result.length) {
            $noresults.hide();
            result.show();
        } else {
            $noresults.show();
        }
    }
    else {
        $noresults.hide();
        $section.show();
    }
});

【讨论】：

【解决方案2】：

首先检查匹配元素的长度。

var elements = $("section:Contains('"+input+"')");
if(elements.length) //Found
    elements.show();
else
    //display a message
    $("body").append("<p>No results were found.</p>");

【讨论】：

注意：有时也可以删除或隐藏消息（但这是提问者的任务）
谢谢！这里主要关注的是，只要没有找到字符串，就会立即附加消息，这会显示多次。