Search - Show Message if results are not found

Question

Search - Show Message if results are not found

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have a problem with the javascript, I got 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 phrase when there are no records, I tried a few times but without success. Following:

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

javascript busca

asked by anonymous 06.01.2016 / 04:29

3 answers

BeforePost writing wrong information Select in three tables in a list - MYSQL

score 1 · Answer 1

All you will need to do is to identify how much tr are with display:none and when they are displaying the message stating that there is no data for the reported 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>

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

See working at jsfiddle

score 0 · Answer 2

See if this will work:

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

score 0 · Answer 3

I added ID in tfoot and created a flag that receives the amount of records from the table and subtracts every time I hide an item, if at the end the value of the flag 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: link