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

2023年9月2日 145次阅读

我在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块中创建元素,但每次按下键时它似乎都会触发,从而打印整个页面的事件.

最佳答案 这是一种更简单的方法.

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

$('.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>
点赞