Cómo realizar una búsqueda y filtro en tiempo real en una tabla HTML

Mariana, miembro de este gran staff, nos hizo el favor de crear esta sección porque controla perfectamente este tema.

Solución:

Creé estos ejemplos.

índice simple de búsqueda

var $rows = $('#table tr');
$('#search').keyup(function() 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() 
        var text = $(this).text().replace(/s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    ).hide();
);

Manifestación: http://jsfiddle.net/7BUmG/2/

Búsqueda de expresiones regulares

La funcionalidad más avanzada que usa expresiones regulares le permitirá buscar palabras en cualquier orden en la fila. Funcionará igual si escribes apple green o green apple:

var $rows = $('#table tr');
$('#search').keyup(function() 

    var val = '^(?=.*\b' + $.trim($(this).val()).split(/s+/).join('\b)(?=.*\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() 
        text = $(this).text().replace(/s+/g, ' ');
        return !reg.test(text);
    ).hide();
);

Manifestación: http://jsfiddle.net/dfsq/7BUmG/1133/

rebote

Cuando implementa el filtrado de tablas con búsqueda en varias filas y columnas, es muy importante que tenga en cuenta el rendimiento y la velocidad/optimización de la búsqueda. Simplemente decir que no debe ejecutar la función de búsqueda en cada pulsación de tecla, no es necesario. Para evitar que el filtrado se ejecute con demasiada frecuencia, debe eliminar el rebote. El ejemplo de código anterior se convertirá en:

$('#search').keyup(debounce(function() 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    // etc...
, 300));

Puede elegir cualquier implementación de rebote, por ejemplo, de Lodash _.debounce, o puede usar algo muy simple como el que uso en las próximas demostraciones (rebote desde aquí): http://jsfiddle.net/7BUmG/6230/ y http:/ /jsfiddle.net/7BUmG/6231/.

tengo un complemento jquery para esto. También usa jquery-ui. Puede 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
        );

Aquí está la mejor solución para buscar dentro de la tabla HTML mientras cubre toda la mesa(todos td, tr en la tabla), javascript puro y como pequeño como sea posible:

   

      
Apple
      
Green
   
   

      
Grapes
      
Green
   
   

      
Orange
      
Orange
   

Si conservas alguna incertidumbre o forma de regenerar nuestro artículo puedes ejecutar una glosa y con deseo lo estudiaremos.

---

---

Utiliza Nuestro Buscador