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 怎么让一个div的内容未加载完时显示加载中...