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?
13 comments
Pietro
5 Aprile 2011 at 8:58
salve ho un problema con il file php che mi da il seguente errore:
Warning: substr_count() [function.substr-count]: Empty substring in /web/htdocs/www.ette.it/home/locali.php on line 25
Forse non ho capito bene cosa devo mettere in “stampa del campo interessato”, può aiutarmi?
enrico
15 Aprile 2012 at 20:12
Grazie, è uno script molto semplice e ben parametrizzato. Ti chiedo, hai anche un autocompletamento con il select di HTML?
Mario Concina
20 Aprile 2012 at 13:25
Intendi di drop down list?
enrico
20 Aprile 2012 at 14:38
Ciao, non se si chiama “drop down”, ma un sistema simile alle tendine/caselle combinate di “msaccess”. Io compilo nella casella e posso aprire la tendina e mi mostra da lì in poi, tutte le righe che iniziano per quello che ho scritto. Grazie per la collaborazione.
puntosit
31 Agosto 2012 at 15:40
Lo script funziona ottimamente, come faccio ad utilizzare la variabile scelta?ho provato ad aggiungere un pulsante submit, ma niente.
pippo
22 Dicembre 2012 at 15:56
Grazie, bella guida!
pippo
22 Dicembre 2012 at 15:58
Avendo piu form, come posso fare per passare da un form all’altro utilizzando il tasto TAB? Grazie
Mimmo
11 Aprile 2013 at 8:17
Lo scaricato a volo mi serviva per trovare la citta di nascita. lo parametrizzo nella ricerca.
Volevo sapere se ricevevo anche ID del campo per effetture Inser ne DB.
Grazie.
Pingback: Modificare lo script di autocompletamento con 2 input - AlterVista
Fabio
8 Novembre 2015 at 14:23
grazie mille
Jacopo Blago
31 Marzo 2016 at 17:42
Ciao,
Praticamente ho un form di ricerca con CITTA’ e AZIENDA vorrei realizzare una select in cascata. Mi spiego meglio.
L’utente scrive nella label, appare la lista di città (uso l’autocomplete) e seleziona la città interessata.
Dopo aver selezionato la città l’utente seleziona l’azienda con la stessa modalità.
Io vorrei che l’autocomplete visualizzi nella lista SOLO le aziende della città inserita in precedenza.
Tutti gli script che trovo in web fanno l’esempio di regione-provincia-comune. Nel mio caso sarebbe una lista infinita di città e aziende quindi uso l’autocomplete.
Spero di essere stato chiaro.
Secondo te come posso fare??
GRAZIE
Mario Concina
31 Marzo 2016 at 17:56
In questo caso specifico, l’unico modo per ottenere questi dati dinamicamente è utilizzare una chiamata ajax prima del secondo autocomplete.
Ciao
Mario Concina
31 Marzo 2016 at 17:54
Ciao Antonio,
in questo credo sia utile aiutarti con jQuery e Ajax.
Dai un’occhiata a questo articolo che ti aiuta a capire come utilizzare jQuery.post (anche se non utilizzi WordPress)
http://www.marioconcina.it/blog/come-fare/wordpress-effettuare-chiamate-ajax-allinterno-del-tema.html