Press "Enter" to skip to content

Implementare un sistema tipo Google Suggest con jQuery

Condividi il post con i tuoi amici o colleghi

Un sistema di autocompletamento automatico tipo Google Suggest è sicuramente qualcosa di molto utile. Personalmente, quando digito qualcosa per una ricerca, ritengo utile digitare le prime lettere per poi scegliere la keyword o keyphrase suggerita (che poi il 99% delle volte è esattamente quella che intendevo digitare).

Per informazioni e alcune riflessioni sui pro e contro di Suggest ti invito a leggere questo post di Davide Tagliaerbe Pozzi.

Vediamo come implementare questo sistema in un nostro progetto personale utilizzando jQuery.

Per prima cosa scarichiamo il plugin “Autocomplete” da qui.

Carichiamo la cartella jquery-autocomplete nella stessa directory del file HTML dove implementeremo autocomplete.

Includiamo tra i tag <head> ed </head> i files necessari:

<script src=”jquery-autocomplete/lib/jquery.js”></script>
<link rel=”stylesheet” href=”jquery-autocomplete/jquery.autocomplete.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-autocomplete/lib/jquery.bgiframe.min.js”></script>
<script type=”text/javascript” src=”jquery-autocomplete/jquery.autocomplete.js”></script>

Includiamo anche il codice:

<script>
$(document).ready(function(){
var data = “web,web 2.0,web design,web developing,grafica,grafica pubblicitaria,grafica vettoriale,grafica 3d”.split(“,”);
$(“#example”).autocomplete(data);
});
</script>

Analizziamo il codice. Nella variabile data ho memorizzato le kywords che verranno poi “suggerite” da autocomplete. Ho scelto come separatore la virgola ed ho associato lo script al campo di testo con ID uguale a “example“. Tutto qui  😉

Potete personalizzare la grafica modificando il file CSS jquery.autocomplete.css e scegliere le keywords che ritenete più opportune. Possiamo rendere il tutto più complesso (e più utile) realizzando uno script che memorizzi le kywords digitate in un database. Questo per far sì che le stesse vengano caricate nella variabile data (magari con una chiamata Ajax) al caricamento della pagina web.

Mi vengono in mente subito due contro da valutare con attenzione:

1) Per non appesantire la pagina in fase di caricamento bisognerà prevedere di richiamare un numero finito di keywords, magari ordinate per rilevanza.

2) Ci vorrà un sistema di moderazione in quanto qualche simpaticone che digiterà cavolate arriverà prima o poi 😛 .

Qui potete visionare lo script.


Condividi il post con i tuoi amici o colleghi
  1. Mi sembra molto semplice, corro subito a provarlo!

  2. Semplicissimo come la maggior parte dei plugin jQuery 😉

  3. frankeyboard frankeyboard

    Niente male!
    C’è modo di utilizzarlo per selezionare più valori?
    Vorrei utilizzarlo per l’input di un elenco di parole chiave (un po’ come fa wordpress per intenderci)

  4. Gerardo Gerardo

    Ciao, ho notato che se non inserisco questo codice
    $(document).ready(function(){
    var data = “web,web 2.0,web design,web developing,grafica,grafica pubblicitaria,grafica vettoriale,grafica 3d”.split(”,”);
    $(”#example”).autocomplete(data);
    });
    nel documento l’autocomplete non funziona. Ho provato a farlo partire solo con l’evento onKeyup di un certo campo in modo da fare una query su db mirata (3 caratteri del nome) per caricare meno dati possibili, però non funziona. Nel senso che quando digito il 3° carattere parte la funzione, costruisco l’array, richiamo l’autocomplete passandogli l’array ma no mi visualizza il div delle risposte.
    Qualche idea?
    Grazie.

  5. Gerardo Gerardo

    ah dimenticavo…. la variabile data ovviamente non è quella postata ma un elenco di nomi…

  6. Ciao Gerardo,

    il codice relativo a $(document).ready(function() è fondamentale e non puoi ometterlo.

    Permette di usufruire di questa funzionalità appena la pagina è stata caricata ed è pronta.

    Purtroppo per farlo funzionare in modo diverso devi ingegnarti lavorando sugli eventi: http://docs.jquery.com/Events

    La documentazione del plugin non ti sarà particolarmente di aiuto ma leggila se vuoi lavorarci e fare modifiche: http://docs.jquery.com/Plugins/Autocomplete#API_Documentation

  7. alex alex

    ciao ottimo tutorial è da poco che uso ajax e i vari pacchetti.
    volevo chiedere come mai questo script non mi funziona con IE.
    Con gli altri browser tutto ok ma con ie non ne vuole sapere.
    qualcuno ha riscontrato lo stesso problema?

  8. Ciao Alex,

    il plugin Autocomplete di jQuery funziona con IE, quale versione usi?

    Hai incluso i files jQuery e il codice nel tag head?

  9. dj2 dj2

    Come faccio a collegare questo script ad un pulsante.
    Esempio: io digito delle lettere ,il sistema di autocompletamento mi suggerisci delle parole..io clicco su una di queste e poi premo un pulsante tipo: cerca con google

    l’ho provato a fare ma mi da degli errori!!1

  10. Ciao dj2,

    per quello che cerchi di fare non devi modificare nulla. Quando selezioni la parola che ti viene suggerita dall’autocomplete, la stessa si trova poi all’interno del campo di testo.

    Devi soltanto recuperarla ed inviarla alla pagina desiderata, quindi, aggiungi un pulsante che sull’evento click effettua il redirect magari accodando la parola all’url di destinazione (GET).

  11. Matteo Matteo

    Ciao ho provato il tuo script è grandissimo e per il mio utilizzo è eccezzionale.

    Ho problemi con le dimensioni dei “suggerimenti”, praticamente se supero i 13 caratteri per record non visualizza i suggerimenti. come posso rimediare ?

  12. Alessandro Alessandro

    Ciao,
    con questo script mi da un errore perchè nel file zip non è incluso jquery.dimensions.js.
    Dove posso trovarlo?

  13. Ciao Alessandro,

    il file in questione non serve, non includerlo.

    L’avevo inserito erroneamente, ora ho aggiornato l’articolo 😉

Comments are closed.