Cercate uno scripta per autocompletamento come Google? Magari dinamico con php e mysql? Allora questo tutorial fa al caso vostro.
In questo articolo riproporrò il famoso autocompletamento proposto da Google che attinge informazioni da un database mysql.
Per fare ciò utilizzerò la libreria “script.aculo.us” di JavaScript.
Nel mio esempio eseguo un autocompletamento su tutti i locali della mia città presenti in un database mysql, inputando nel campo di testo la lettera “a” compariranno tutte le voci contententi la lettera “a”, inputando “ao” tutte le voci che hanno al loro interno la coppia di caratteri “ao” e cosi via, ma vediamo meglio l’esempio.
Tutto ciò di cui ho bisogno per far funzionare questo script è:
- Un file HTML: all’interno del quale includo le librerie di script.aculo.us, prototype, ecc… ed il form all’interno del quale andrò ad effettuare l’aucompletamento;
- Un file PHP: dove verranno processate le informazioni lato server (connessione al database, query, e stampa dell’autocompletamento);
- Cartella con i file *.js: le librerie javascript da includere.
Pagina HTML
Scomponiamola per sezioni, la parte dell’header conterrà la chiamata alle varie librerie:
Nel corpo della pagina invece ci sarà il form per l’autocompletamento:
Oltre al form ed al campo input ho inserito un div “suggerimenti_locale” all’interno del quale scorreranno le chiavi di ricerca; immediatamente sotto la chiamata “ajax” dove oltre al div (suggerimenti_locale) darò in pasto anche il file PHP da cui eseguirà le istruzioni lato server.
Pagina PHP
Ecco qui la pagina php per intero
-
0){
echo "
- " . $locali[$a] . " "; } } ?>
Ciò che bisogna modificare all’interno di questo file:
- Riga dalla 2 alla 5: rimpiazzare i valori esistenti con i parametri relativi al vostro database mysql;
- Riga 13: rimpiazzare con la vostra query;
- Riga 16: rimpiazzare con il nome del campo da visualilzzare.
Il nostro autocompletamento è pronto, sta a voi adesso abbellirlo con i css.
Scarica script per autocompletamento
Clicca qui per scaricare lo script per autocompletamento php+mysql+ajax.
Dubbi?
