jQuery search and filter table

Question

Stavo cercando un plug-in jQuery che filtra una tabella in base ai valori di input.

Mi sono imbattuto in , ma non riesco a capire come farlo funzionare per una casella di input già esistente.

Attualmente crea un nuovo modulo di input per me (che non desidero) ma mi piacerebbe poterlo utilizzare con una casella di input esistente con un pulsante di invio dell'input.

Answer 1

Questo plug-in non è possibile, a meno che non si digiti il ​​codice e lo si modifichi per farlo.

La casella di input di ricerca viene generata automaticamente dal proprio javascript e non vi sono opzioni per modificare tale comportamento.

Answer 2

@Adam, prova a attivare il onKeyUp del campo di testo generato da plugin. In primo luogo, è necessario conoscere l'id di quel campo (uso Firebug), diciamo che è generated_fld, allora il codice sarà:

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

Answer 3

Sembra che il tempo si è risposto alla tua domanda per voi. QuickSearch consente infatti di associare la funzione di ricerca a una casella di input di testo preesistente.

riklomas afferma che:

Nota che l'utilizzo è cambiato nella versione più recente di ricerca rapida, il codice non è compatibile, la forma e ingresso non sono costruiti dallo script più.

Ho appena iniziato a usarlo oggi e sembra che funzioni abbastanza bene. Sembra che mangi la sua parte di CPU, almeno nel mio ambiente di test (Firefox 3.6, OS X e un set di dati piuttosto ampio), ma probabilmente non è univoco per questo particolare plugin.

Answer 4

Ho usato questo codice per un po '. Primo:

1. Il campo di testo di input per filtrare/ricerca ha id 'ricerca'
2. In realtà basta usare la prima cella di ogni riga, si può facilmente estendere questo (seguire i commenti sul codice)

Il Codice:

$('#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"); 
     } 
    });   
});