jQuery búsqueda y tabla de filtro

Question

Estaba buscando un complemento jQuery que filtre una tabla de acuerdo con los valores de entrada.

Me encontré con , pero no puedo encontrar la manera de hacerlo funcionar para un cuadro de entrada ya existente.

Actualmente, crea un nuevo formulario de entrada para mí (que no quiero) pero me gustaría poder utilizarlo con un cuadro de entrada existente que tiene un botón de envío de entrada.

Answer 1

Esto no es posible con este complemento listo para usar, a menos que explore su código y lo modifique para hacerlo.

El cuadro de entrada de búsqueda se genera automáticamente por su propio javascript y no hay opciones para cambiar ese comportamiento.

Answer 2

@ Adam, intente activar el onKeyUp del campo de texto generado por el plugin. primer lugar, usted necesita saber el id de ese campo (uso de Firebug), digamos que es generated_fld, a continuación, el código será:

$(document).ready(function() { 
    $("#my_other_input").keyup(function(){ 
     $("#generated_fld").val($(this).val()).keyup(); 
    }) 
}); 

Answer 3

Parece que el tiempo se ha respondido a su pregunta para usted. QuickSearch de hecho le permite adjuntar la función de búsqueda a un cuadro de entrada de texto preexistente.

riklomas menciona que:

Tenga en cuenta que el uso ha cambiado en la última versión del quicksearch, el código no es compatible con versiones anteriores, la forma y la entrada no se construyen por el script más.

Acabo de empezar a usarlo hoy y parece que funciona bastante bien. Parece que consume su cuota de CPU, al menos en mi entorno de prueba (Firefox 3.6, OS X y un conjunto de datos bastante grande), pero probablemente no sea exclusivo de este complemento en particular.

Answer 4

He estado usando este código por un tiempo. Primero:

1. El campo de texto de entrada al filtro/búsqueda tiene id 'búsqueda'
2. En realidad, sólo tiene que utilizar la primera celda de cada fila, se puede extender fácilmente este (seguir los comentarios en el código)

El Código:

$('#search').on('input', function() { 
    var str = $('#search').val().toLowerCase(); 
    $("#containerTable tr").each(function (index, element) { 
     var label = $(this).find("td").eq(0).html().toLowerCase(); 
     //var labelx = $(this).find("td").eq(x).html().toLowerCase(); 
     //... 

     if (str == '' || label.indexOf(str) != -1) { 
      // || labelx.indexOf(str) != -1) ... 
      $(this).css("display", "table-row"); 
     } 
     else { 
      $(this).css("display", "none"); 
     } 
    });   
});