In questo articolo vi illustro un semplice esempio per creare l’effetto “suggerimenti” adottato da molti siti web grazie a Prototype/Scriptaculous e PHP.
Prototype mette a disposizione l’oggetto Autocompleter, nella pratica però questo oggetto non fa altro che inviare una richiesta AJAX ogni qualvolta l’utente digita caratteri in un campo testo, quindi si dovrà lavorare anche lato server con PHP.
Esempio
Nell’esempio ho utilizzato per comodità le regioni italiane, in PHP le ho messe in un array e, dopo averle confrontate con l’input inviato da ajax, lo script stampa a video sotto forma di elenco puntato ul>li i risultati. Per il confronto ho deciso di usare la funzione ereg() che permette tra le altre cose di controllare se una stringa è presente all’interno di un’altra stringa.
Ajax & HTML
Passiamo alla parte AJAX, questo è il codice javascript:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Spieghiamo la funzione: il primo campo (“nome-regione“) contraddistingue l’id del campo testo, il secondo (“autocomplete_choices“) l’id del div dove compariranno i suggerimenti, il terzo (“suggerisci.php“) la pagina da interrogare, paramName invece indica il nome da assegnare alla variabile passata tramite il metodo POST.
Questo il codice completo (il contenuto del body):
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Lato PHP
Questo è lo script che prende i dati AJAX e li confronta con l’array:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
In questo articolo ho escluso il codice CSS per formattare la lista, è presente comunque nell’archivio e nella Demo.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Fonte: Matrixteo