immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Ricerca in modo interattiva con jQuery

di MaiNick | 3 Feb 2010 | jQuery | 2 Commenti


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.

Tags: , , ,

2 Commenti

  1. ellepi ha detto:

    quicksearch è utilissimo, ma non ho capito come fare se devo cercare solo su 1 delle colonne di una tabella…

    • MaiNick ha detto:

      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 selector dove 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.

Trackbacks

Lascia un Commento

^ Torna su