Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Con jQuery firltrare i dati contenuti in una pagina può essere molto semplice a patto di presiporre le infromazioni che vogliamo filitrare in maniera adeguata.

Sfrutteremo la capacità di jQuery di leggere gli attributi dei tag e il filtraggio avverrà utilizzando il metodo hide() per nascondere gli elementi.

Nella spiegazione del codice supporremo che la libreria jQuery sia già caricata nella pagina.
La versione di jQuery da noi utilizzata è la 1.4.3 anche se recentemente è stata rilasciata la 1.4.4.

Nell’esempio che mostreremo andremo a filtrare delle città i cui nomi vengono prelevati da un database, sta di fatto che il metodo utilizzato è funzionante anche per dati inseriti manualmente.

Supponiamo quindi di avere una query che ci ritorna un elenco di nomi di città.

<?php
//connessione e selezione database
$query="SELECT comune FROM comuni WHERE condizioni ORDER BYcomune ASC";
$res= mysql_query($query);
while($row=mysql_fetch_assoc($res)){?>
        <span class="hidden" title="<?php echo strtolower($row[‘comune’])?>">
           <?php echo $row[‘comune’]?>
        </span>
<?php
}
?>

Quello che produce questo script è una lista di comuni racchiusi ciascuno in un tag span con classe hidden. Questa classe ci sarà utile per selezionare gli elementi da nascondere, la selezione degli elementi inoltre avverrà mediante l’attributo title.

Per filtrare gli elementi è comunque necessaria una casella di testo, per inserire i parametri di filtraggio cioè le inizili, quello che avverrà è che inserendo una lettera nella casella verranno mostrate solo quelle che iniziano con la lettera inserita, analogamente se ne mettiamo due, tre …

<input type="text" name="iniziali" />

Ora abbiamo a disposizione tutti i pezzi e possiamo andare a filtrare. Ecco il codice:

$(document).ready(function(){
        $(‘input[name="iniziali"]’).keyup(function(){
                $val=$(this).val().toLowerCase();       
                if ($val.length!=0){
                        $(‘span.hidden([title^="’+$val+‘"])’).show();
                        $(‘span.hidden:not([title^="’+$val+‘"])’).hide();                                                                                                          
                } else
                        $(‘span.hidden’).show();
        });
});

Quando inseriamo un carattere nel campo di testo e lo rilasciamo, viene eseguito il codice collegato all’evento keyup, per prima cosa viene meorizzato in $val = quanto abbiamo inserito nel campo di testo, se la casella è vuota mostriamo tutto (l’else dell’unico if), altrimenti eseguiamo il codice:

$(‘span.hidden([title^="’+$val+‘"])’).show();
$(‘span.hidden:not([title^="’+$val+‘"])’).hide();

La prima riga mostra tutti gli elementi che hanno tag span e class hidden e che inoltre hanno un titolo che inizia per le lettere inserite nel box di testo:
[title^=”‘+$val+'”]

La seconda riga invece nascode tutti gli elementi con classe hidden e che non inziano per quanto scritto nel box di testo:
:not([title^=”‘+$val+'”])

E’ necessario mostrare e nascondere perchè vogliamo che il sistema funzioni anche quando eliminiamo un carattere dal textfield con il pulsante backspace.

Per non aver problemi con maiuscole e minuscole abbiamo trasformato tutti i valori degli attributi title in caratteri minuscoli e anlaogamente abbiamo trasformato in minuscoli tutti i caratteri scritti dentro il campo di testo.

Una demo funzionante è disponibile a questo indirizzo: http://demo.studio-88.it/jQuery143/filtrojQuery.php

Twitter