Question 35857 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to display default message when no results found on Jquery search filter

I’m currently building a page where a search field acts as a filter. It works perfectly fine and shows data against related word, but there is one issue that I’d like to solve. When the entered string or other words is not found in all the existing the page remains blank.

How could I display a default message on my page when no results are found by the filter? Something like a simple <p> explaining that no results were found.

The idea is to display it only once as long as the string is not found.

$('#search_field').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");

  $('#userFind').find('tr').each(function() {
    var $table = $(this);

    if (!($table.find('td').text().search(patt) >= 0)) {
      $table.not('.t_head').hide();
    }
    
    if (($table.find('td').text().search(patt) >= 0)) {
      $(this).show();
    }
  });
});
Tags:

3

Answers


  1. 0

    This is untested since you haven’t provided any table to your question.

    After you have looped though all tr, then check if any is visible. If not then append a tr with custom message and remove it and new search.

    $('#search_field').on('keyup', function() {
  var value = $(this).val();
  // console.log(value);
  var patt = new RegExp(value, "i");
  $(".noRecord").remove();
  $('#userFind').find('tr').each(function() {
    var $table = $(this);

    if (!($table.find('td').text().search(patt) >= 0)) {
      $table.not('.t_head').hide();

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

  });
  
  if ($('#userFind tr:visible').length == 0) {
    $('#userFind tbody').append("<tr class='noRecord'><td>No records found.</td></tr>")
  }

});
    Login or Signup to reply.
  2. 0

    Assuming you have a div:

    <div id="zeroHits">no results were found</div>

    You can hide/show the #zeroHits div as follows:

    $('#search_field').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");
  var zeroHits = true;
  $('#userFind').find('tr').each(function() {
    var $table = $(this);

    if (!($table.find('td').text().search(patt) >= 0)) {
      $table.not('.t_head').hide();
    }
    
    if (($table.find('td').text().search(patt) >= 0)) {
      $(this).show();
      zeroHits = false;
    }
  });
  if(zeroHits) {
    $('#zeroHits').show();
  } else {
    $('#zeroHits').hide();
  }
});
    Login or Signup to reply.
  3. 0

    Try this untested code

    post your HTML and I can test

    const $rows = $('#userFind tbody tr'); // only tbody rows
$('#search_field').on('keyup', function() {
  var value = $(this).val();
  // console.log(value);
  var patt = new RegExp(value, "i");
  $rows.each(function() {
    const found = $(this).find('td').filter(function() {
      return $(this).text().search(patt) != -1
    }).length > 0
    $(this).toggle(found);
  });
  $("#notFound").toggle($rows.filter(":visible").length === 0)
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search