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>");

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

2 个答案: