Geek Answers Handbook

Show if no results were found in keyup event

I have several classes called post-contenton div, and you have a search box whose event is fired on keyup. If there is no corresponding result, I would like to display "No matching results"

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

I tried to create an element inside an else block, but it seems to fire every time a key is pressed, thus printing the entire page with the event.

+4
source share
4 answers

Here is an easier way.

Hide everything and then show the corresponding messages.

$('.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>
Run code
+1
source

, ?

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

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

I think you need this to be so. Create a div with the class .noresultand content you need to have.

0
source

You need to add a flag to check if results are found.

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

More articles:


All Articles