在键盘事件未找到结果时显示

Question

我调用post-content了多个类，div并有一个搜索框，该事件被触发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块内创建该元素，但是似乎每次按下该键时都会触发，从而打印出带有事件的整个页面。

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>