javascript - 在 keyup 事件中找不到结果时显示

Question

我在 div 上有多个名为 post-content 的类，并且有一个搜索框，它的事件在 keyup 上触发。如果没有匹配的结果，我想显示“没有匹配的结果”

$('.post-content').each(function() {
  $(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('#search-criteria').on('keyup', function() {
  var searchTerm = $(this).val().toLowerCase();
  $('.post-content').each(function() {
    if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

我尝试在 else block 中创建元素，但似乎每次按下键时都会触发，从而打印整个页面的事件。

Answer 1

这里有一个更简单的方法。

隐藏所有然后显示相关帖子。

$('.post-content').each(function() {
  $(this).attr('data-search-term', $(this).text().toLowerCase());
});

$('#search-criteria').on('keyup', function() {

  var searchTerm = $(this).val().toLowerCase();
  $('.post-content').hide();

  if (searchTerm) {
    var matches = $('.post-content').filter('[data-search-term *= ' + searchTerm + ']');
    $('.no-match').toggle(matches.length == 0)
    matches.show();
  }
});

.no-match {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="search-criteria" />

<div class=post-content>aaaaaaaa</div>
<div class=post-content>bbbbbbbb</div>
<div class=post-content>aaaaaaaa</div>
<div class=post-content>bbbbbbbb</div>
<div class=post-content>aaaaaaaa</div>
<div class=post-content>bbbbbbbb</div>
<div class="no-match">No Matches</div>