JSFiddle - React, Tailwind, and code Playground

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
  <div class="row">
    <button type="button" id="buscar" onclick="iniciarBusca()">Iniciar</button>
  </div>

  <div class="row">
    <div class="col-md-3">
      <form action="#" method="get">
        <div class="input-group">
          <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
          <input class="form-control" id="buscarTabela" name="q" placeholder="Pesquisar" />
        </div>
      </form>
    </div>
    <div class="col-md-9">
      <table class="table tableRelatorio">
        <thead>
          <tr>
            <th>Entry</th>
            <th>Entry</th>
            <th>Entry</th>
            <th>Entry</th>
            <th>Entry</th>
            <th>Entry</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sample</td>
            <td>Filter</td>
            <td>12-11-2011 11:11</td>
            <td>OK</td>
            <td>123</td>
            <td>Do some other</td>
          </tr>
          <tr>
            <td>Try</td>
            <td>It</td>
            <td>11-20-2013 08:56</td>
            <td>It</td>
            <td>Works</td>
            <td>Do some FILTERME</td>
          </tr>
          <tr>
            <td>§</td>
            <td>$</td>
            <td>%</td>
            <td>&</td>
            <td>/</td>
            <td>!</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

function iniciarBusca() {
  var activeSystemClass = $(".list-group-item.active")

  //something is entered in search form
  $("#buscarTabela").keyup(function () {
    var that = this
    // affect all table rows on in systems table
    var tableBody = $(".tableRelatorio tbody")
    var tableRowsClass = $(".tableRelatorio tbody tr")
    $(".search-sf").remove()
    tableRowsClass.each(function (i, val) {
      //Lower text for case insensitive
      var rowText = $(val).text().toLowerCase()
      var inputText = $(that).val().toLowerCase()

      if (rowText.indexOf(inputText) == -1) {
        //hide rows
        tableRowsClass.eq(i).hide()
      } else {
        $(".search-sf").remove()
        tableRowsClass.eq(i).show()
      }
    })
    //all tr elements are hidden
    if (tableRowsClass.children(":visible").length == 0) {
      tableBody.append(
        '<tr class="search-sf"><td class="text-muted" colspan="6">Não Encontrado.</td></tr>',
      )
    }
  })
}