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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<table id="table_example" border="0"> <thead> <tr> <th>Email</th> <th>Id</th> <th>Phone</th> <th>Total</th> <th>Ip</th> <th>Url</th> </tr> </thead> <tbody> <tr> <th>devo@flexomat.com</th> <td>66672</td> <td>941-964-8535</td> <td>$2482.79</td> <td>172.78.200.124</td> <td>http://gmail.com</td> </tr> <tr> <th>henry@mountdev.net</th> <td>35889</td> <td>941-964-9543</td> <td>$2776.09</td> <td>119.232.182.142</td> <td>http://www.gmail.com</td> </tr> <tr> <th>christian@reno.gov</th> <td>60021</td> <td>941-964-5617</td> <td>$2743.41</td> <td>167.209.64.181</td> <td>http://www.dotnet.ca</td> </tr> <tr> <th>muffins@donuts.com</th> <td>17927</td> <td>941-964-9511</td> <td>$2998.18</td> <td>210.214.231.182</td> <td>http://google.se</td> </tr> <tr> <th>muffins@reno.gov</th> <td>76375</td> <td>941-964-2757</td> <td>$1836.09</td> <td>220.222.93.171</td> <td>http://www.samba.org</td> </tr> <tr> <th>mendez@gmail.com</th> <td>45834</td> <td>941-964-2575</td> <td>$2805.46</td> <td>228.170.245.253</td> <td>http://flexomat.com</td> </tr> <tr> <th>dev@gmail.com</th> <td>20022</td> <td>941-964-4967</td> <td>$3296.54</td> <td>175.248.70.240</td> <td>http://www.flexomat.com</td> </tr> <tr> <th>foo@polyester.se</th> <td>55977</td> <td>941-964-745</td> <td>$2953.73</td> <td>222.114.227.156</td> <td>http://www.donuts.com</td> </tr> <tr> <th>adam@aftonbladet.se</th> <td>38867</td> <td>941-964-6302</td> <td>$1949.27</td> <td>116.241.143.196</td> <td>http://flexomat.com</td> </tr> <tr> <th>devo@donuts.com</th> <td>51426</td> <td>941-964-1234</td> <td>$1067.00</td> <td>88.96.149.82</td> <td>http://www.polyester.se</td> </tr> <tr> <th>henry@samba.org</th> <td>40859</td> <td>941-964-4856</td> <td>$3401.19</td> <td>68.152.250.74</td> <td>http://www.flexomat.com</td> </tr> <tr> <th>found@dotnet.ca</th> <td>23986</td> <td>941-964-2686</td> <td>$1393.52</td> <td>98.102.181.138</td> <td>http://lostnfound.org</td> </tr> <tr> <th>carl@fish.org</th> <td>73392</td> <td>941-964-5792</td> <td>$3876.04</td> <td>246.234.182.243</td> <td>http://www.google.se</td> </tr> <tr> <th>found@mountdev.net</th> <td>03519</td> <td>941-964-1599</td> <td>$1176.48</td> <td>104.212.122.177</td> <td>http://donuts.com</td> </tr> </tbody> </table> |
Nell’intestazione della nostra pagina richiamiamo la libreria jQuery, il file di QuickSearch e il codice javascript per inizializzare il plugin:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $('table#table_example tbody tr').quicksearch({ position: 'before', attached: 'table#table_example', stripeRowClass: ['odd', 'even'], labelText: 'Cerca nella tabella' }); </script> |
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.
ellepi
quicksearch è utilissimo, ma non ho capito come fare se devo cercare solo su 1 delle colonne di una tabella…
MaiNick
Ciao “ellepi”, il plugin in questione è cambiato da quando ho realizzato questo articolo di recensione, ma sulla pagina dedicata al plugin ho visto che tra le opzioni ora ha anche
selectordove puoi indicare su quale colonna effettuare la ricerca.Se non ci riesci, ti consiglio un altro plugin DataTables dove puoi impostare dei filtri per ogni colonna e per ogni tipo di dato.