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

Posted

技术标签:

【中文标题】Jquery 搜索过滤器 - 未找到结果时显示默认消息【英文标题】:Jquery search filter - display default message when no results found 【发布时间】: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> 解释“未找到结果”。

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

感谢您的帮助。

【问题讨论】:

【参考方案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>");

【讨论】:

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

以上是关于Jquery 搜索过滤器 - 未找到结果时显示默认消息的主要内容,如果未能解决你的问题,请参考以下文章

在jQuery过滤器什么都不返回时显示消息

jquery 怎么让一个div的内容未加载完时显示加载中...

AJAX Live Search是一种PHP搜索表单,类似于谷歌自动完成功能,可以在键入时显示结果。

Oracle - 查询没有返回结果时显示“无行”

为啥 jQuery FileTree 在未设置时显示文件?

选中复选框时jQuery隐藏div,未选中时显示