Facciamo in modo che gli utenti non commettano errori nella compilazione dei nostri form. Dove possibile una strada da seguire è quella dell’autocomplete, ovvero forni resu ggerimenti “live” in modo che l’utente possa scegliere l’opzione desiderarata. Per fare quersto useremo jQuery UI, e per la parte server php e mysql.
Il database: una semplice tabella contenente le province italiane, a noi serviranno i campi sigla e nome.
A questo punto abbiamo bisogno di due file, uno sarà quello visualizzato dall’utente, il secondo sarà un file php che pescherà dal database i dati filtrati e li restituirà in formato json.
Il file html: due campi di input, il primo da compilare da parte dell’utente dove noi assoveremo la chiamata al server (quando avrà digitato il secondo carattere) e un campo dove scriveremo la sigla:
<input type=”text” id=”tag” name=”tag” value=”" />
<input type=”text” id=”tagid” name=”tagid” value=”" />
Nel tag head andremo a inserire:
1. il collegamento a jquery (preso dalla CDN di google)
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js”></script>
2. il collegamento a jquery ui dalla stessa fonte
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>
3. il tema css che applicheremo al nostro oggetto
<link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css” />
A questo punto, al caricamento del DOM, associamo all’elemento che ha id tag la funzione autocomplete:
$().ready(function(){
$(‘#tag’).autocomplete();
})
e andiamo a personalizzarlo specificando:
minLength:2, ovvero almeno due caratteri prima di effettuare la chiamata
source: ‘autocomplete.php’ la nostra fonte di dati
la gestione dell’evento change
change:function(event,ui){
if(!ui.item){
$(this).val(”);
$(‘#tagid’).val(”);
return false;
}
},
e soprattuto la gestione dell’evento select
select:function(event,ui){
$(‘#tagid’).val(ui.item.id);
}
per scrivere il valore dell’id nel secondo campo.
Ultimo passaggio il file php:
error_reporting(0);
require(‘include/mysql.inc.php’);
$return_arr=array();
$nome=$_GET['term'];
$sql=’select nome, sigla from province where nome like “‘.mysql_real_escape_string($nome).’%” order by nome’;
$fetch=mysql_query($sql);
while($row=mysql_fetch_array($fetch, MYSQL_ASSOC)){
$row_array['value']=$row['nome'];
$row_array['id']=$row['sigla'];
array_push($return_arr,$row_array);
}
mysql_close($conn);
echo json_encode($return_arr);
l’include contiene la connessione al database, dichiariamo l’array che useremo per raccogliere i dati, leggiamo la variabile get passata dal form e la usaimo all’interno della clausola where come filtro.
Mettiamo i risultati in un array che stampiamo nel formato json per inviarli alla pagina che ne ha fatto richiesta.
Ecco l’esempio al lavoro.
