Ogni web designer, sviluppatore o semplice curioso, prima o poi si è imbattuto (o si imbatterà) nel famoso “autocomplete” di un campo input di un form.
Dunque, riporto questa semplice guida, con il codice che ho utilizzato per realizzare un semplice e molto funzionale sistema di autocompletamento dei campi di un form.
In questo esempio proporrò il sistema di auto-completamento di un campo attraverso l’utilizzo di un file PHP che eseguirà una query su di un database MySql. Nello specifico mi preoccuperò di restituire una lista di nomi presi da una tabella soltanto digitando le iniziali del nome.
Come prima cosa elenchiamo cosa ci servirà e che cosa andremo ad utilizzare:
- jQuery
- jQuery UI
- PHP
- MySql
Iniziamo con l’inclusione di jQuery e di jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Per quanto riguarda jQuery UI potete anche personalizzare il CSS (e non utilizzare dunque quello di default). Per la personalizzazione del CSS del jQuery UI vi rimando al sito http://jqueryui.com/themeroller/ dal quale è possibile visualizzare tutti i temi oppure personalizzarne uno.
L’inclusione del CSS per jQuery UI può essere fatta comunque nel seguente modo:
Assicuratevi che il vostro script jQuery UI abbia incluso il sistema per l’autocomplete. Per qualsiasi dubbio potete consultare la sezione download del sito jQueryUI a questo indirizzo: http://jqueryui.com/download/
In questo preciso esempio, il funzionamento del sistema di “autocomplete” funzionerà nel seguente modo:
- Digitazione delle prime lettere della parola cercata
- Invio tramite AJAX ad un file PHP delle lettere digitate
- Elaborazione del file PHP con restituzione dei risultati formattati tramite JSON
- Compilazione del campo con il dato suggerito
Vediamo adesso la form di partenza in html utilizzata per far funzionare l’autocompletamento del campo del form:
<!-- JS --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <!-- CSS --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css"></script> </pre> <form name="form"><input id="campo" name="campo" type="text" /></form> <pre>
A questo punto invece ecco lo script jQuery che utilizzermo per la nostra funzione di autocomplete
$(document).ready(function() { $( "#campo" ).autocomplete({ source: 'lista-utenti.php', minChars: 2, autoFill: true, mustMatch:true, delay: 0,//0 cacheLength: 1, max:30, formatItem: function (row) { return row[0] + " (" + row[2] + ", " + row[1] + ")"+" "+row[5]; }, formatMatch: function (row) { return row[0]; }, formatResult: function (row) { return row[0]; }, select: function( event, ui ) { //add(event, ui); //utilizzare questo spazio per valorizzare ad esempio dei campi input con altri dati prelevati da db //$("#campo_nascosto").val(ui.item.nome_campo_array_settato_in_lista-utenti); } }); }); // chiude ready.function
A questo punto diamo uno sguardo al file PHP che conterrà la select al database MySql sulla tabella “nomi”. Per semplificare l’articolo do per scontato che la tabella sia già creata e con essa la connessione al database MySql. Per la guida alla creazione di una classe per la gestione di un database MySql vi rimando all’articolo: “Creare una classe in PHP per la gestione del database MySql“.
Ecco il file PHP che eseguirà la query e restituirà i risultati codificati e ordinati tramite JSON.
<!--?php <br ?-->/** * Created by Jonathan Domenici - www.jonathandomenici.com */ require('lib/classDB.php'); // dove ho la libreria per accedere al db $Obj=new GlobalClass(); $q = $_GET['term']; $resArray = array(); $Obj->Database(); $result = $Obj->freeQuery("SELECT * FROM `tabella_nomi` WHERE `nome` LIKE '".$q."%' LIMIT 0,10",'tabella_nomi'); if (!$result) { $resArray = array(); } else { $stringa=''; $e = 0; foreach( $result as $row): $insertRow = array( 'label' => $row['nome'] ); array_push($resArray,$insertRow); $stringa=""; endforeach; } echo json_encode($resArray); ?>
Ecco, questo è quanto. Il risultato sarà un campo che vi proporrà i nomi con le iniziali che avete iniziato a digitare.
Per la DEMO di questo script potete dare uno sguardo a questo: Autocomplete di un campo di un form in jQuery e PHP
Per scaricare i file di questo progetto… mandatemi un’email! 😉
Ciao Jonathan.
Grazie per il tuo contributo.
Non essendo esperto di php, non capisco come fai a passare le iniziali digitati nell’oggetto “campo” al file .php.
Infatti scrivi :
source : ‘lista-utenti.php’
cioè non gli passi nessun dato nell’indirizzo, tipo ‘lista-utenti.php?iniziali=campo.value
(campo.value…l’ho scritto solo per far capire che devo passare il contenuto di campo)
Scusa l’ignoranza…ma se potresti delucidarmi in merito te ne sarei grato.
Ah!…un’altra cosa…come posso associare un id agli elementi contenuti nell’array…e di conseguenza farmeli ritornare al momento della selezione dall’oggetto autocomplete ?
Ti saluto e ti ringrazio.
Ciao
Ciao Antonio,
scriviamoci per email così riusciamo ad essere più esaustivi nelle risposte!
Grazie a te a presto