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

Question

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

// 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>解释“没有找到结果”。

这个想法是只要找不到字符串就只显示一次。

谢谢你的帮助。

Answer 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();
    }
});

Answer 2

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

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