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

Question

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

Answer 1

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>")
  }

});

Answer 2

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

Answer 3

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)
});