Search - Show Message if results are not found

Question

I’m having a problem with javascript, I took a js that does the search in the table, but when there are no records it just shows nothing, how do I put a "Return" with some sentence when there are no records,I tried a few times but without success. Follows:

// Write on keyup event of keyword input element
$("#search").keyup(function(){
    _this = this;
    // Show only matching TR, hide rest of them
    $.each($("#table tbody").find("tr"), function() {
        console.log($(this).text());
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
            $(this).hide();
        else
            $(this).show();
    });
});

Answer 1

I added ID in tfoot and created a flag that receives the amount of records from the table and subtracted every time you hide an item, if at the end the flag value is 0 I show the message.

var table = $("#table tbody").find("tr");

$("#search").keyup(function() {
  _this = this;
  flag = table.length;

  $.each(table, function() {
    if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1) {
      $(this).hide();
      flag--;
    } else {
      $(this).show();
    }
  });

  if (!(flag > 0))
    $("#retorno").html("Não foram encontrados resultados");
  else
    $("#retorno").html("");
});

Functional example: https://jsfiddle.net/scs5jo2e/

Answer 2

All you’ll need to do is identify how many tr are with display:none and when they are showing the message stating that there is no data for the given filter.

Example:

JS:

var table = $("#table tbody").find("tr");
var mensagem = $("#mensagem");
mensagem.hide();
$("#search").keyup(function() {
  _this = this;
  $.each(table, function() {
    if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
      $(this).hide();
    else
      $(this).show();
  });

  var tableDisplay = table.css('display');

  mensagem.hide();
  if (tableDisplay === 'none') {
    mensagem.show();
  }

});

HTML:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search" id="search">
  </div>
</form>

<table class="table table-hover" id="table">
  <tr>
    <td>Gabriel</td>
    <td>Rodrigues</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Highlander</td>
    <td>Imortal</td>
    <td>94</td>
  </tr>
</table>
<div id="mensagem">Sem resultados</div>

Outside the each() I put a variable to show the display of tr, when all are hidden it will enter the condition that will show the message.

See working on jsfiddle

Answer 3

See if this works:

<div id="msg"></div>

.....

$("#search").keyup(function(){
    _this = this;
    // Show only matching TR, hide rest of them
    $.each($("#table tbody").find("tr"), function() {
        console.log($(this).text());
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
            $(this).hide();
            $("#msg").html("<span class="alert-warning">Ops, nada foi encontrado</span>");
        else
            $(this).show();
            $("#msg").html("<span class="alert-success">Opa, encontramos alguma coisa</span>");
    });
});