Javascript 当jquery筛选器不返回结果时在div中显示消息

我正在尝试将if/else语句实现到我拥有的Jquery代码片段中

因为我是一个非常缺乏javascript/Jquery经验的用户，所以我很难确定是否应该添加if/else

就像现在的代码片段一样，如果有匹配项，它将显示一个div，如果没有匹配项，它将不显示任何内容。我希望它在找不到匹配项时显示消息

  $("#studyselector").change(function(){
var selectItem = $(this).val().toLowerCase();
filter(selectItem);
});

function filter(e) {

  var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
        $('.listItem').hide().filter(function () {
      return regex.test($(this).data('name').toLowerCase())
  }).show();
}

这里是一个链接到一个工作

$（“#studyselector”）.change（函数（）{
var selectItem=$（this.val（）；
过滤器（选择项）；
});
函数过滤器（e）{
var regex=new RegExp（'\\b\\w*'+e+'\\w*\\b'）；
$（'.listItem'）.hide（）.filter（函数（）{
返回regex.test（$（this.data（'name'））
}).show（）；
}

每件事
科学
自然界
艺术
科学馆藏
科学，明星，什么的
科学和东西

数据库：科学全球、科学数据线、科学贸易和工业、科学档案

学术搜索数据库
每件事
所有研究

1000份参考资料

来自4500本杂志和1000篇同行预览文章的文本

自然科学
自然、科学
所有研究

自然和更多

6000篇自然文章和1000篇同行预览文章

请尝试以下操作：-

添加Html：-

<div class="error" style="display: none;">Not Found</div>

请试试这个：-

添加Html：-

<div class="error" style="display: none;">Not Found</div>

您可以添加以下内容：

//底部过滤器函数
if（$（“#listSelection”）.children（“：visible”）.length==0）{
$（“.empty”）.show（）；
}否则{
$（“.empty”）.hide（）；
}

.empty

仅为包含空消息的html元素初始化，这里是一个JSFIDLE，基于您的代码

您可以添加以下内容：

//底部过滤器函数
if（$（“#listSelection”）.children（“：visible”）.length==0）{
$（“.empty”）.show（）；
}否则{
$（“.empty”）.hide（）；
}

---

.empty

仅为包含空消息的html元素创建类，这里是一个JSFIDLE，基于您的代码

您需要显示消息，但在选择所有内容时也显示所有内容

在这里，如果过滤器没有显示任何内容，我将切换一条消息

我还初始化以在页面加载时显示所选内容，并允许在再次选择后显示所有内容

$（“#studyselector”）.change（函数（）{
var selectItem=$（this.val（）；
如果（selectItem==“一切”）$（'.listItem'）.show（）；
else过滤器（selectItem）；
$（“#消息”）。切换（$（'.listItem:visible'）。长度===0）；
}).change（）；
函数过滤器（e）{
var regex=new RegExp（'\\b\\w*'+e+'\\w*\\b'）；
$（'.listItem'）.hide（）.filter（函数（）{
返回regex.test（$（this.data（'name'））
}).show（）；
}

每件事
科学
自然界
艺术
没有什么
科学馆藏
科学，明星，什么的
科学和东西

数据库：科学全球、科学数据线、科学贸易和工业、科学档案

学术搜索数据库
每件事
所有研究

1000份参考资料

来自4500本杂志和1000篇同行预览文章的文本

自然科学
自然、科学
所有研究

自然和更多

6000篇自然文章和1000篇同行预览文章

什么也没找到

选择所有内容时，您需要显示消息，但也需要显示全部

在这里，如果过滤器没有显示任何内容，我将切换一条消息

我还初始化以在页面加载时显示所选内容，并允许在再次选择后显示所有内容

$（“#studyselector”）.change（函数（）{
var selectItem=$（this.val（）；
如果（selectItem==“一切”）$（'.listItem'）.show（）；
else过滤器（selectItem）；
$（“#消息”）。切换（$（'.listItem:visible'）。长度===0）；
}).change（）；
函数过滤器（e）{
var regex=new RegExp（'\\b\\w*'+e+'\\w*\\b'）；
$（'.listItem'）.hide（）.filter（函数（）{
返回regex.test（$（this.data（'name'））
}).show（）；
}

每件事
科学
自然界
艺术
没有什么
科学馆藏
科学，明星，什么的
科学和东西

数据库：科学全球、科学数据线、科学贸易和工业、科学档案

学术搜索数据库
每件事
所有研究

1000份参考资料

来自4500本杂志和1000篇同行预览文章的文本

自然科学
自然、科学
所有研究

自然和更多

6000篇自然文章和1000篇同行预览文章

什么也没找到

哪个选择选项应该不显示任何内容？

所有内容

；）矛盾修饰够了：事实上，我认为只有第一次起作用的everything选择中缺少了一些东西。更多有用的解决方案，请参阅我的答案谢谢大家的回答，它真的很有帮助。我决定使用@ipraxa Inc answer，因为它是我所需要的最简单、最基本的选项。哪个选择选项应该不显示任何内容？

所有内容

；）矛盾修饰够了：事实上，我认为只有第一次起作用的everything选择中缺少了一些东西。更多有用的解决方案，请参阅我的答案谢谢大家的回答，它真的很有帮助。我决定使用@ipraxa Inc-answer，因为它是我需要的最简单、最基本的答案。