Dynamically search in Capable

Question

I’m setting up a Bootstrap table and I’d like to put some search filters on that table. I searched and found an interesting way to search through a input. That would be the way:

$('input#txt_consulta').quicksearch('table#tabela tbody tr');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.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="form-group input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
  <input name="consulta" id="txt_consulta" placeholder="Consultar" type="text" class="form-control">
 </div>

<table id="tabela" class="table table-hover">
  <thead>
      <tr>
          <th>Email</th>
          <th>Id</th>
          <th>Telefone</th>
          <th>Url</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th>[email protected]</th>
          <td>66672</td>
          <td>941-964-8535</td>
          <td>http://gmail.com</td>
      </tr>
  
      <tr>
          <th>[email protected]</th>
          <td>35889</td>
          <td>941-964-9543</td>
          <td>http://dotnet.ca</td>
      </tr>
  </tbody>
 </table>

Only in my project, I’m not using jQuery, could someone show me how this jQuery command would look in Typescript? Or else another alternative using the JavaScript pure?

Answer 1

With javascript would be this

function myFunction() {
  var input, filter, table, tr, td, cell, i, j;
  input = document.getElementById("txt_consulta");
  filter = input.value.toUpperCase();
  table = document.getElementById("tabela");
  tr = table.getElementsByTagName("tr");

  for (i = 1; i < tr.length; i++) {
    tr[i].style.display = "none";
    td = tr[i].getElementsByTagName("td");

  for (var j = 0; j < td.length; j++) {
       cell = tr[i].getElementsByTagName("td")[j];
       if (cell) {
          if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
              break;
          } 
       }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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="form-group input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
  <input name="consulta" id="txt_consulta" placeholder="Consultar" type="text" class="form-control" onkeyup="myFunction()">
 </div>

<table id="tabela" class="table table-hover">
  <thead>
      <tr>
          <th>Email</th>
          <th>Id</th>
          <th>Telefone</th>
          <th>Url</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th>[email protected]</th>
          <td>66672</td>
          <td>941-964-8535</td>
          <td>http://gmail.com</td>
      </tr>
  
      <tr>
          <th>[email protected]</th>
          <td>35889</td>
          <td>941-964-9543</td>
          <td>http://dotnet.ca</td>
      </tr>
  </tbody>
 </table>