我在用户输入输入时搜索div。 如果没有记录我应该显示消息a No Records
如果我在“H”内搜索其最初显示的消息为“No Records”
这是我的js代码
$('#searchequip').keyup(function()
{
var val = $.trim(this.value).toUpperCase();
$(".mt-checkbox").each(function()
{
var parent = $(this).closest('li'),
length = $(this).text().length > 0;
if (length && $(this).text().search(new RegExp(val, "i")) < 0)
{
parent.fadeOut("slow");
console.log('Nothing Found ');
$("#errmsg").html("No Results Found").show().fadeOut("slow");
}
else
{
parent.show();
}
});
})
这是我的小提琴
答案 0 :(得分:2)
我建议您定义一个标志变量以确定是否找到该单词然后执行显示&#34;未找到结果&#34; each
函数后的文本:
var val = $.trim(this.value).toUpperCase();
var found = false;
$(".mt-checkbox").each(function() {
var parent = $(this).closest('li'),
length = $(this).text().length > 0;
if (length && $(this).text().search(new RegExp(val, "i")) < 0) {
parent.fadeOut("slow");
console.log('Nothing Found ');
} else {
found = true;
parent.show();
}
});
if (!found) $("#errmsg").html("No Results Found").show().fadeOut("slow");
答案 1 :(得分:2)
这是代码; http://jsfiddle.net/cod7ceho/246/
$('#searchequip').keyup(function (){
var val = $.trim(this.value).toUpperCase();
var noElem = true;
$('.mt-checkbox').each(function (){
var parent = $(this).closest('li'),
length = $(this).text().length > 0;
if (length && $(this).text().search(new RegExp(val, 'i')) < 0)
{
parent.fadeOut('slow');
}else{
noElem = false;
parent.show();
}
});
if (noElem)
$('#errmsg').html('No Results Found').show().fadeOut('slow');
})
答案 2 :(得分:0)
问题是您要更新#errmsg
循环中的each
范围,而您实际应该做的是在您完成搜索时最后更新它。查看更新的代码。
$('#searchequip').keyup(function()
{
var val = $.trim(this.value).toUpperCase();
var length = false;
var globalfound = -1;
$(".mt-checkbox").each(function()
{
var parent = $(this).closest('li');
length = $(this).text().length > 0;
localfound = $(this).text().search(new RegExp(val, "i"));
if (globalfound < 0) { globalfound = localfound; }
if (length && localfound < 0)
{
parent.fadeOut("slow");
} else {
parent.show();
}
});
if (length && globalfound < 0) {
console.log('Nothing Found ');
$("#errmsg").html("No Results Found").show().fadeOut("slow");
} else {
$("#errmsg").html("No Results Found").hide()
}
})
&#13;
#errmsg
{
color: red;
}
&#13;
<div class="searchWrap">
<div class="input-icon">
<i class="fa fa-search"></i>
<input class="form-control" type="text" id="searchequip" placeholder="Search">
</div>
</div>
<span id="errmsg"></span>
<div class="portlet-body equipment-body">
<div class="propsContainer">
<div class="propsContent">
<ul id="equipdetails">
<li style="display: list-item;">
<div class="col-lg-8">
<label data-equipid="3" class="mt-checkbox mt-checkbox-outline exercise-txt">
<input type="checkbox">Hillary Clinton<span></span>
</label>
</div>
<div class="col-lg-4">
<div class="exercise-img"></div>
</div>
</li>
<li style="display: list-item;">
<div class="col-lg-8">
<label data-equipid="4" class="mt-checkbox mt-checkbox-outline exercise-txt">
<input type="checkbox">Donald Trump<span></span>
</label>
</div>
<div class="col-lg-4">
<div class="exercise-img"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
&#13;