David Funaro

Andare alla ricerca infinita di Plugin o Add-on per jQuery non è sempre la soluzione migliore. Basta conoscere alcune funzioni (basilari di jQuery) … e la soluzione è a portata di mano.
Anche perché non sempre l’installazione di un plugin funziona al primo colpo, quindi tanto vale provare a fare le cose semplici da se.

Problema:

Vogliamo filtrare una lista in base a delle parole chiavi che inseriamo dentro ad un campo di ricerca. E lo vogliamo fare in modo dinamico: man mano che si scrive la chiave di ricerca i risultati si modificano i real time, dinamicamente.
Immaginiamo per esempio di avere il seguente codice:

Soluzione:
Immaginiamo che la nostra struttura di ricerca sia composta come qui di seguito

<div><input id="filtro" type="text" /></div>
<div id="box">
<li>parola - uno</li>
<li>parola - due</li>
...
...
<li>parola - n</li>
</div>

la funzione qui di seguito fa proprio cio che vogliamo

$(document).ready(function(){
 $("#filtro").bind('keypress',function(){
   $("#box").find("li").each(function(){
     if($("#filtro").val().length >= 2 ){
         if( $(this).is(":contains('"+ $("#filtro").val() + "')") )
           $(this).css('display','');
         else
           $(this).css('display','none');
       }else{
         $(this).css('display','');
       }
     });
   });

 });

In sequenza le cose da fare sono:

• Catturare l’evento keypress con la Bind: in questo modo ogni volta che viene premuto un pulsante la funzione definita insieme all’evento viene eseguita.
• Cercare tutti i <li> presenti dentro al div #box
• Se e solo se, abbiamo inserito piu di due caratteri all’interno del input type di ricerca
• Allora, verifichiamo che la chiave di ricerca sia contenuta nel valore del <li> preso in considerazione

La funzione più interessante di tutta la funzione è sicuramente la seguente

$(this).is(":contains('"+ $("#filtro").val() + "')")

Nel momento in cui viene eseguito $(this) è equivalente al <li> preso in considerazione nell’iterazione.
Il metodo is(expr) si occupa di verificare che l’oggetto dell’espressione passata come parametro sia un attributo dell’oggetto che la sta invocando. Ci sono molte possibilità di verifica, si puo per esempio, verificare il tipo di un tag oppure che un tag abbia un particolare classe di stili e puo come in questo caso, verificare che la parola inserita nel campo di ricerca ($(“#filtro”)) il testo contenuto tra i tag <li>.

In particolare la verifica del testo contenuto nel tag viene fatta dal selettore :contains(text).

Conclusioni

Lo script che è stato preso in considerazione è solo a titolo di esempio, ma il concetto di ricerca dinamica puo essere esteso ad una qualsiasi struttura dati.
A volte può essere pui semplice scrivere qualche linea di codice da soli piuttosto che perdere tempo a cercare plug-in esotici che poi fanno tutto tranne quello che dichiarano nelle specifiche.