Question

我在post-content上有多个名为div的课程，并且有一个搜索框，在keyup上触发了该事件。如果没有匹配结果，我希望显示＆＃39; 没有结果匹配＆＃39;

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

这是一种更简单的方法。

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

＆＃13;

$('.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();
  }
});

＆＃13;

.no-match {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

为什么不显示和隐藏无结果元素而不是动态创建它？

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

  var searchTerm = $(this).val().toLowerCase();
  var term_found = false;

  $('.post-content').each(function() {
    if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0) {

      $(this).show();
      term_found = true;

    } else {
      $(this).hide();
    }
  });

  // show if not found, hide if found
  $('#post-content-no-result').toggle(!term_found);

});

Answer 3

$('.post-content').each(function() {
  $(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('#search-criteria').change(function() {
  var searchTerm = $(this).val().toLowerCase();
  $('.post-content').each(function() {
    if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0) {
      $(this).show();
      $(this).parent().find(".noresult").remove();
    } else {
      $(this).hide();
      $(this).parent().append( "<div class='noresult'>Test</div>" );
    }
  });
});

我想你需要那样的。使用.noresult类和您需要的内容创建div。

Answer 4

您需要添加一个标记来检查是否找到结果。

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

if(!isResultFound) {
    $('#noResultDiv').show();
} else {
    $('#noResultDiv').hide();
}
  });
});

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

4 个答案: