当jquery过滤器没有返回结果时，在div中显示消息

Posted 2023-02-27

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

由于我是非常缺乏经验的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();

这是一个工作jsfiddle的链接

$("#studyselector").change(function()
  var selectItem = $(this).val();
  filter(selectItem);
);
function filter(e) 
    var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
        $('.listItem').hide().filter(function () 
        return regex.test($(this).data('name'))
    ).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="studyselector">
    <option value="everything">everything</option>
     <option value="science">science</option>
     <option value="nature">nature</option>
     <option value="arts">arts</option>
  </select>

<div id="listSelection">

<div class="listItem" data-name="science, nature" >
  <h3>Science Collection</h3>
  <span class="fieldstudy">science, stars, something</span>
  <p>Science and stuff </p>
  <p>Databases: Science Global, Science Dateline, Science Trade and Industry, Science Archive</p>
</div>

<div class="listItem" data-name="nature"  >
  <h3>Academic Search DB</h3>
  <span class="fieldstudy">everything</span>
  <p>All Studies </p>
    <p>  1000 references  </p>
    <p>  Texts from 4500 magazines and 1000 peer previewed articles</p>
</div>

<div class="listItem" data-name="arts" >
  <h3>Nature Science</h3>
  <span class="fieldstudy">nature, science</span>
  <p>All Studies </p>
    <p>  Nature and more  </p>
    <p>  6000 natur articles and 1000 peer previewed articles</p>
</div>

</div>

答案

请试试这个： -

添加html： -

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

Js： -

$("#studyselector").change(function()
    var selectItem = $(this).val();
    filter(selectItem);
  );
  function filter(e) 
      var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
            $('.listItem').hide().filter(function () 
          return regex.test($(this).data('name'))          
      ).show();

      if($('.listItem:visible').length===0)
        $('.error').show();
      else
        $('.error').hide();
      
  

另一答案

你可以添加这个：

// bottom filter function

if($("#listSelection").children(":visible").length == 0) 
  $(".empty").show();
 else 
  $(".empty").hide();

.empty只是用于保存空消息的html元素的类，这里是一个jsfiddle example，基于你的代码

另一答案

您需要显示一条消息，但同时显示所有内容

如果过滤器没有显示任何内容，我在此处切换消息。

我还初始化以显示页面加载时选择的内容并允许所有内容在另一个选择后显示所有内容

$("#studyselector").change(function() 
  var selectItem = $(this).val();
  if (selectItem == "everything") $('.listItem').show();
  else filter(selectItem);
  $("#message").toggle($('.listItem:visible').length === 0);
).change();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="studyselector">
  <option value="everything">everything</option>
  <option value="science">science</option>
  <option value="nature">nature</option>
  <option value="arts">arts</option>
  <option value="nothing">nothing</option>
</select>

<div id="listSelection">

  <div class="listItem" data-name="science, nature">
    <h3>Science Collection</h3>
    <span class="fieldstudy">science, stars, something</span>
    <p>Science and stuff </p>
    <p>Databases: Science Global, Science Dateline, Science Trade and Industry, Science Archive</p>
  </div>

  <div class="listItem" data-name="nature">
    <h3>Academic Search DB</h3>
    <span class="fieldstudy">everything</span>
    <p>All Studies </p>
    <p> 1000 references </p>
    <p> Texts from 4500 magazines and 1000 peer previewed articles</p>
  </div>

  <div class="listItem" data-name="arts">
    <h3>Nature Science</h3>
    <span class="fieldstudy">nature, science</span>
    <p>All Studies </p>
    <p> Nature and more </p>
    <p> 6000 natur articles and 1000 peer previewed articles</p>
  </div>
  <div id="message">Nothing found</div>
</div>

以上是关于当jquery过滤器没有返回结果时，在div中显示消息的主要内容，如果未能解决你的问题，请参考以下文章

当搜索没有返回结果时，Select2 过滤器值消失

Drupal 视图 - 当视图没有结果时不显示任何公开的过滤器选项

产品过滤器 - 根据选中/取消选中的多个复选框显示结果

SQL 日期过滤器：当开始日期 = 结束日期时返回结果

下面的代码显示了使用节点 js 从图形数据库中提取数据。数据提取得很好，但是当我使用过滤器（在哪里）时，它给出了空结果

从 views_php 过滤器返回 TRUE 未按预期工作