[javascript] Cómo realizar una búsqueda en tiempo real y filtrar en una tabla HTML



3 Answers

tengo un plugin jquery para esto. Utiliza jquery-ui también. Puedes ver un ejemplo aquí http://jsfiddle.net/tugrulorhan/fd8KB/1/

$("#searchContainer").gridSearch({
            primaryAction: "search",
            scrollDuration: 0,
            searchBarAtBottom: false,
            customScrollHeight: -35,
            visible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            textVisible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            minCount: 2
        });
Question

Estuve buscando en Google y buscando por un tiempo, pero no puedo evitar este problema.

Tengo una tabla HTML estándar, que contiene, por ejemplo, fruta. Al igual que:

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

Sobre esto tengo un cuadro de texto, que me gustaría buscar en la tabla a medida que el usuario escribe. Entonces, si escriben Gre por ejemplo, la fila naranja de la tabla desaparece, dejando la manzana y las uvas. Si continuaban y escribían Green Gr la fila de Apple desaparecería, dejando solo las uvas. Espero que esto esté claro.

Y, si el usuario eliminara parte o la totalidad de su consulta del cuadro de texto, me gustaría que reapareciesen todas las filas que ahora coinciden con la consulta.

Si bien sé cómo eliminar una fila de la tabla en jQuery, tengo poca idea sobre cómo hacer la búsqueda y eliminar las filas de forma selectiva en función de esto. ¿Hay una solución simple para esto? ¿O un plugin?

Si alguien pudiera señalarme en la dirección correcta, sería genial.

Gracias.




El complemento Datatable JS es también una buena alternativa para accomedate la función de búsqueda para la tabla html

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on( 'keyup', function () {
    table.search( this.value ).draw();
} );

https://datatables.net/examples/basic_init/zero_configuration.html




Encontré la respuesta de dfsq sus comentarios extremadamente útiles. Hice algunas modificaciones menores aplicables a mí (y lo estoy publicando aquí, en caso de que sea de alguna utilidad para otros).

  1. Usar class como ganchos, en lugar de elementos de tabla tr
  2. Búsqueda / comparación de texto dentro de una class secundaria mientras se muestra / oculta el elemento primario
  3. Haciéndolo más eficiente almacenando los elementos de texto $rows en una matriz solo una vez (y evitando $rows.length veces el cálculo)

var $rows = $('.wrapper');
var rowsTextArray = [];

var i = 0;
$.each($rows, function() {
  rowsTextArray[i] = $(this).find('.fruit').text().replace(/\s+/g, ' ').toLowerCase();
  i++;
});

$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
  $rows.show().filter(function(index) {
    return (rowsTextArray[index].indexOf(val) === -1);
  }).hide();
});
span {
  margin-right: 0.2em;
}
<input type="text" id="search" placeholder="type to search" />

<div class="wrapper"><span class="number">one</span><span class="fruit">apple</span></div>
<div class="wrapper"><span class="number">two</span><span class="fruit">banana</span></div>
<div class="wrapper"><span class="number">three</span><span class="fruit">cherry</span></div>
<div class="wrapper"><span class="number">four</span><span class="fruit">date</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




Solución pura de Javascript:

Funciona para TODAS las columnas y no distingue entre mayúsculas y minúsculas:

function search_table(){
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search_field_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table_id");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      let tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }
}



Related