JSFiddle - React, Tailwind, and code Playground

by Reid Horton

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <input class="form-control" type="text" id="buscar" placeholder="search..." />
  <hr />
  <div class="row">
    <div id="no-results">
      No results!
    </div>
    <table class="table table-striped" id="Tabla">
      <thead>
        <tr>
          <td>ID</td>
          <td>Name</td>
          <td>Level</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>This is my name</td>
          <td>Level Master 45</td>
        </tr>
        <tr>
          <td>2</td>
          <td>This is my name number 2</td>
          <td>Level Master 1</td>
        </tr>
        <tr>
          <td>3</td>
          <td>This is my name number 3</td>
          <td>Level Mastermind 4</td>
        </tr>
      </tbody>
    </table>

    <hr />

  </div>

</div>

CSS

#no-results {
  display: none;
  text-align: center;
  font-weight: bold;
}

JavaScript

$(document).ready(function () {
	RowFilter();
});

function RowFilter() {
  var busqueda = document.getElementById('buscar');
  var noResults = document.getElementById('no-results');
  var table = document.getElementById("Tabla").tBodies[0];

  buscaTabla = function() {
    texto = busqueda.value.toLowerCase();
    var didMatch = false;
    var r = 0;
    while (row = table.rows[r++]) {
      if (row.innerText.toLowerCase().indexOf(texto) !== -1) {
        row.style.display = null;
        didMatch = true;
      } else {
        row.style.display = 'none';
      }
    }
    if (!didMatch) {
    	noResults.style.display = 'block';
    } else {
    	noResults.style.display = 'none';
    }
  }

  busqueda.addEventListener('keyup', buscaTabla);

}