How to create a searchbar with JavaScript

Question

Hello Im trying to create a searchbar for my table with javascript and works but with some issues. The problem is when I try to search in two rows. For example if I only search in Name works! but if I search Name and Last Name doesn't work.

Here is my js function

var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function() {
  buscar(this);
}

function buscar(inputbuscar) {
  var valorabuscar = (inputbuscar.value).toLowerCase().trim();
  var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
  for (var i = 0; i < tabla_tr.length; i++) {
    var tr = tabla_tr[i];
    var textotr = (tr.innerText).toLowerCase();
    tr.className = (textotr.indexOf(valorabuscar) >= 0) ? "mostrar" : "ocultar";
  }
}

Here is a runnable copy:

var textbuscar = document.getElementById("buscar");
textbuscar.onkeyup = function(){
 buscar(this);
}
function buscar(inputbuscar){
 var valorabuscar = (inputbuscar.value).toLowerCase().trim();
 var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
 for(var i=0; i<tabla_tr.length; i++){
  var tr = tabla_tr[i];
  var textotr = (tr.innerText).toLowerCase();
  tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
 }
}

.mostar{display:block;}
.ocultar{display:none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<linl rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  <div class="container-fluid">
<div class="row">
  <div class="col-xs-12">
    <h1 class="page-header">
My Table
    </h1>
    <!-- TABLA INICIA -->
    <table id="tabla" class="table table-striped">
      <thead>
        <tr>
          <th style="width:160px">Nombre</th>
          <th>Apellido</th>
          <th style="width:220px">Profesion</th>
          <th style="width:140px">Sueldo</th>
        </tr>
        <tr>
          <td colspan="4">
            <input id="buscar" type="text" class="form-control" placeholder="Escriba algo para filtrar" />
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Juan</td>
          <td>Perez Patiño</td>
          <td>Marketing Empresarial</td>
          <td class="text-right">S/. 9000.00</td>
        </tr>
        <tr>
          <td>Alberto</td>
          <td>Gonzales Flores</td>
          <td>Derecho</td>
          <td class="text-right">S/. 4000.00</td>
        </tr>
        <tr>
          <td>Gustavo</td>
          <td>Bueno Bravo</td>
          <td>Derecho</td>
          <td class="text-right">S/. 7000.00</td>
        </tr>
        <tr>
          <td>Enrique</td>
          <td>Pacheco Perez</td>
          <td>Derecho</td>
          <td class="text-right">S/. 12000.00</td>
        </tr>
        <tr>
          <td>Jaime</td>
          <td>Andrade Gonzales</td>
          <td>Economia</td>
          <td class="text-right">S/. 7500.00</td>
        </tr>
        <tr>
          <td>Andrea</td>
          <td>Loayza Perez</td>
          <td>Medicina Humana</td>
          <td class="text-right">S/. 7500.00</td>
        </tr>
        <tr>
          <td>Elvira</td>
          <td>Gonzales Perez</td>
          <td>Ingeniería de Sistema</td>
          <td class="text-right">S/. 7500.00</td>
        </tr>
        <tr>
          <td>Joseph</td>
          <td>Rodriguez Pacheco</td>
          <td>Ingeniería de Software</td>
          <td class="text-right">S/. 8200.00</td>
        </tr>
        <tr>
          <td>Pedro</td>
          <td>kuczynski</td>
          <td>Economista</td>
          <td class="text-right">S/. 250000.00</td>
        </tr>
        <tr>
          <td>Alan</td>
          <td>García Perez</td>
          <td>Derecho</td>
          <td class="text-right">S/. 120000.00</td>
        </tr>
        <tr>
          <td>Jose</td>
          <td>Villanueva Salvador</td>
          <td>Medicina Humana</td>
          <td class="text-right">S/. 2900.00</td>
        </tr>
        <tr>
          <td>Alberto</td>
          <td>Lozano García</td>
          <td>Medicina Humana</td>
          <td class="text-right">S/. 2900.00</td>
        </tr>
      </tbody>
    </table>
    <!-- TABLA FINALIZA -->
    
    
  </div>
</div>
</div>

A demo at jsFiddle to play with.

You are searching two separatelly words in differents cells, so it will not work. For example, if you search for `Jose Salva` in your mind `Jose Villanueva Salvador` will match, but the truth is that javascript is searching for the string `Jose Salva` inside a single cell. You need to split the searching string, search each word independently and then mix the results. — Marcos Pérez Gude, Jun 28 '16 at 15:55

score 0 · Answer 1 · edited May 23 '17 at 12:06

To give you a headstart, I modified your function a little bit. This still doesn't work the way you want, but it should guide you with an idea:

function buscar(inputbuscar){
    var valorabuscar = (inputbuscar.value).toLowerCase().trim();

    var arraydevalores = valorabuscar.split(" ");
    console.log(arraydevalores); //CHECK WHAT THIS LOGS

    var tabla_tr = document.getElementById("tabla").getElementsByTagName("tbody")[0].rows;
        console.log(findOne(arraydevalores, tabla_tr));
    for(var i=0; i<tabla_tr.length; i++){
        var tr = tabla_tr[i];
        var textotr = (tr.innerText).toLowerCase();
        tr.className = (textotr.indexOf(valorabuscar)>=0)?"mostrar":"ocultar";
    }
}

I split your valorabuscar variable where any spaces are, so now you have an array of the terms that the user is searching for sepparately in an array that looks like this:

["juan", "pérez", "patiño"]

This array is easier to manipulate so as to compare it with your table and return whatever's more similar to it. Good luck!

PS: Here's an appropriate question to help you continue: Check if an array contains any element of another array in JavaScript

How to create a searchbar with JavaScript

1 Answers1