Implementare un sistema tipo Google Suggest con jQuery
Pubblicato il 20 Marzo 2009
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.
Autore: emawebdesign
Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.
Pubblicato in:
Cerca nel sito
In evidenza
Categorie
