Appunti e tutorial su front-end web technology

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.