Implementare un sistema tipo Google Suggest con jQuery
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4 out of 5)
Loading ... Loading ...



Pubblicato il 20/3/2009 alle 16:30

Implementare un sistema tipo Google Suggest con jQuery

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 :P .

Qui potete visionare lo script.

Pubblicato in Ajax, Google, HTML, JavaScript, Programmazione, Scripts, Web 2.0, jQuery | 17 Commenti »

Condividi




Realizzazione siti web



Altri articoli che potrebbero interessarti

17 Responses to “Implementare un sistema tipo Google Suggest con jQuery”

  1. Angelo Says:
    Marzo 21st, 2009 at 12:54

    Mi sembra molto semplice, corro subito a provarlo!

  2. EmaWebDesign Says:
    Marzo 21st, 2009 at 18:16

    Semplicissimo come la maggior parte dei plugin jQuery ;)

  3. frankeyboard Says:
    Aprile 14th, 2009 at 10:47

    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. EmaWebDesign Says:
    Aprile 14th, 2009 at 12:57

    Questo plugin credo faccia al caso tuo.

    Per ottenere la selezione multipla devi ingegnarti, leggi questa discussione http://forum.html.it/forum/showthread.php?threadid=745229

  5. Gerardo Says:
    Maggio 12th, 2009 at 09:01

    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.

  6. Gerardo Says:
    Maggio 12th, 2009 at 09:02

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

  7. EmaWebDesign Says:
    Maggio 12th, 2009 at 15:09

    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

  8. alex Says:
    Maggio 31st, 2009 at 17:06

    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?

  9. EmaWebDesign Says:
    Giugno 2nd, 2009 at 11:58

    Ciao Alex,

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

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

  10. 15 tecniche per implementare autosuggest tramite Ajax | EmaWebDesign :: Web Programming / Web Design / SEO Says:
    Luglio 2nd, 2009 at 08:26

    [...] post “Implementare un sistema tipo Google Suggest con jQuery” vi illustrai come implementare, tramite un plugin per jQuery, un sistema di completamento [...]

  11. dj2 Says:
    Agosto 23rd, 2009 at 14:29

    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

  12. EmaWebDesign Says:
    Settembre 1st, 2009 at 09:48

    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).

  13. Matteo Says:
    Ottobre 23rd, 2009 at 16:23

    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 ?

  14. EmaWebDesign Says:
    Ottobre 23rd, 2009 at 17:11

    Ciao Matteo,

    per le opzioni ti consiglio di visualizzare la documentazione che trovi qui: http://docs.jquery.com/Plugins/Autocomplete

    In particolare le options: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

  15. Alessandro Says:
    Ottobre 28th, 2009 at 16:02

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

  16. EmaWebDesign Says:
    Ottobre 30th, 2009 at 13:20

    Ciao Alessandro,

    il file in questione non serve, non includerlo.

    L’avevo inserito erroneamente, ora ho aggiornato l’articolo ;)

  17. EmaWebDesign goto 2010 | EmaWebDesign :: Web Programming / Web Design / SEO Says:
    Dicembre 31st, 2009 at 15:25

    [...] 01) Implementare un sistema tipo Google Suggest con jQuery [...]

Leave a Reply