Ricerca in modo interattiva con jQuery

Tra i tantissimi plugin sviluppati per jQuery da me utilizzati, QuickSearch è quello che ho scoperto di recente, ma rapidamente aggiunto nella mia lista di preferiti.
QuickSearch agisce visualizzando un campo di ricerca posto sopra o sotto determinati elementi – tabelle, elenchi e paragrafi – e permette di filtrare il contenuto in tempo reale man mano che vengono digitati i caratteri nel campo di ricerca.

Ho trovato molto utile QuickSearch nei miei progetti utilizzandolo per effettuare ricerche veloci su tabelle.
Dovete realmente provare per apprezzare la semplicità e velocità nella ricerca.

Utilizzo

Ecco un esempio semplice per vedere il plugin in azione. La tabella che utilizzeremo nell’esempio dell’articolo è la stessa utilizzata dal creatore sulla pagina di presentazione del plugin.

Email
Id
Phone
Total
Ip
Url




devo@flexomat.com
66672
941-964-8535
$2482.79
172.78.200.124
http://gmail.com


henry@mountdev.net
35889
941-964-9543
$2776.09
119.232.182.142
http://www.gmail.com


christian@reno.gov
60021
941-964-5617
$2743.41
167.209.64.181
http://www.dotnet.ca


muffins@donuts.com
17927
941-964-9511
$2998.18
210.214.231.182
http://google.se


muffins@reno.gov
76375
941-964-2757
$1836.09
220.222.93.171
http://www.samba.org


mendez@gmail.com
45834
941-964-2575
$2805.46
228.170.245.253
http://flexomat.com


dev@gmail.com
20022
941-964-4967
$3296.54
175.248.70.240
http://www.flexomat.com


foo@polyester.se
55977
941-964-745
$2953.73
222.114.227.156
http://www.donuts.com


adam@aftonbladet.se
38867
941-964-6302
$1949.27
116.241.143.196
http://flexomat.com


devo@donuts.com
51426
941-964-1234
$1067.00
88.96.149.82
http://www.polyester.se


henry@samba.org
40859
941-964-4856
$3401.19
68.152.250.74
http://www.flexomat.com


found@dotnet.ca
23986
941-964-2686
$1393.52
98.102.181.138
http://lostnfound.org


carl@fish.org
73392
941-964-5792
$3876.04
246.234.182.243
http://www.google.se


found@mountdev.net
03519
941-964-1599
$1176.48
104.212.122.177
http://donuts.com

Nell’intestazione della nostra pagina richiamiamo la libreria jQuery, il file di QuickSearch e il codice javascript per inizializzare il plugin:

Come potete vedere abbiamo provveduto ad intercettare l’elemento tabella tramite il suo id, dopo di che specifichiamo le opzioni di inizializzazione.

Opzioni

Le opzioni specificate sopra nel codice javascript di inizializzazione sono alcune delle tante che possiamo utilizzare, di seguente elencate e descritte:

• position: posizione del modulo di ricerca (before, after, prepend [default], append).
• attached: elemento collegato al modulo di ricerca (default: body).
• formId: attributo id del modulo di ricerca (default: quicksearch).
• labelText: testo dell’etichetta del campo di ricerca (default: Quick Search).
• labelClass: attributo class dell’etichetta del campo di ricerca (default: qs_label).
• inputText: valore del campo input di ricerca.
• inputClass: attributo class del campo input di ricerca (default: qs_input).
• loaderId: attributo id dell’elemento di caricamento risultati (default: loader).
• loaderClass: attributo class dell’elemento di caricamento risultati (default: loader).
• loaderImg: visualizza un’immagine insieme al testo di caricamento.
• loaderText: testo di caricamento (default: Loading …).
• stripeRowClass: aggiunge una classe per ogni elemento in base all’array dato (array di stringhe di classi).
• delay: ritardo in millisecondi dopo l’ultimo carattere digitato (default: 500).
• onBefore: esegue una funzione prima di effettuare la ricerca (prende: function() { }).
• onAfter: esegue una funzione dopo di effettuare la ricerca (prende: function() { }).

Nota: Quando QuickSearch è collegata a una tabella, evitate l’uso di prepend o append.

Sviluppato da Rik Lomas potete trovare ulteriori informazioni sulla pagina dedicata a QuickSearch plugin jQuery, come il file javascript del plugin e le demo implementati sugli altri elementi specificati all’inizio dell’articolo.