Tutorial: autocompletamento Ajax, Php, Mysql

Tutorial: autocompletamento Ajax, Php, Mysql

3301
13
CONDIVIDI

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:

1
2
3
4
5
<head>
	<script src="scriptaculous/prototype.js" type="text/javascript"></script>
	<script src="scriptaculous/effects.js" type="text/javascript"></script>
	<script src="scriptaculous/controls.js" type="text/javascript"></script>
</head>

Nel corpo della pagina invece ci sarà il form per l’autocompletamento:

1
2
3
4
5
<form name="autocompletamento" method="post">
	<input type="text" id="locale" name="locale"/>
	<div id="suggerimenti_locale" class="boxlocale"></div>
    	<script type="text/javascript">new Ajax.Autocompleter("locale", "suggerimenti_locale", "locali.php", {minChars: 1});</script>
</form>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
define("HOST", "localhost");
define("DB_USER", "root");
define("DB_PWD", "");
define("DB_NAME", "nomedatabase");
 
if(isset($_POST['locale'])) $locale = $_POST['locale']; else $locale = "";
 
$locali = array();
mysql_connect(HOST, DB_USER, DB_PWD);
mysql_select_db(DB_NAME);
 
$sql = mysql_query("select * from locali "); //query da cambiare
$row = mysql_fetch_array($sql);
while($row){
	array_push($locali, $row["nomeCampo"]); //stampa del campo interessato
	$row = mysql_fetch_array($sql);
}
 
sort($locali);
?>
<ul>
<?php
for($a=0; $a<count($locali); $a++){
	if(substr_count($locali[$a], $locale) > 0){
		echo "<li>" . $locali[$a] . "</li>";
	}
 
}
?>
</ul>

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?

  • 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

    Grazie, è uno script molto semplice e ben parametrizzato. Ti chiedo, hai anche un autocompletamento con il select di HTML?

    • Mario Concina

      Intendi di drop down list?

  • enrico

    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

    Lo script funziona ottimamente, come faccio ad utilizzare la variabile scelta?ho provato ad aggiungere un pulsante submit, ma niente.

  • pippo

    Grazie, bella guida!

    • pippo

      Avendo piu form, come posso fare per passare da un form all’altro utilizzando il tasto TAB? Grazie

  • Mimmo

    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

    grazie mille

  • Jacopo Blago

    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

    • In questo caso specifico, l’unico modo per ottenere questi dati dinamicamente è utilizzare una chiamata ajax prima del secondo autocomplete.

      Ciao

  • 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