Ho realizzato un autocomplete per un campo città.
Funziona tutto a dovere, solo che dovrei implementare un autocomplete multiplo...
Ossia: ho un box città, un box provincia, un box regione.
Scrivendo nel box città, dal tooltip vengono suggerite delle città con relativa regione e provincia (sotto in piccolo). Dovrei fare in modo che al click su una voce del tooltip, oltre a completarsi la città, dovrebbe completarsi anche la regione e la provincia.
Dimenticavo i box regione e provincia non sono box ma una select.
Ecco quindi come sono fatti i miei field nel form:
Codice PHP:
// inclusione dell'autocomplete su nello script
// [url]http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html[/url]
<script type="text/javascript" src="js/bsn.AutoSuggest_c_2.0.js"></script>
// field città
<input name="citta" id="citta" class="inputbox" type="text" style="width:100px;" value="<?php echo output( $r['citta'] ); ?>" />
// writeProvincia( 'prov' ); stampa questo: (alcuni valori per comodità)
<select name="prov" class="select">
<option value="" class="menuEmpty">not set</option>
<option value="AG">AG</option>
<option value="AL">AL</option>
<option value="AN">AN</option>
<option value="AO">AO</option>
<option value="AP">AP</option>
<option value="AQ">AQ</option>
<option value="AR">AR</option>
<option value="AT">AT</option>
</select>
// writeRegione( 'reg' ); stampa questo: (alcuni valori per comodità)
<select name="reg" class="select">
<option value="" class="menuEmpty">not set</option>
<option value="Abruzzo">Abruzzo</option>
<option value="Basilicata">Basilicata</option>
<option value="Calabria">Calabria</option>
<option value="Campania">Campania</option>
</select>
// poi abbiamo la chiamata ad ajax
<script type="text/javascript">
<!--
var optionsjson3 = {
script:"include/ajax.php?json=true&type=citta&qlimit=10&",
varname:"input",
json:true
};
var as_json3 = new AutoSuggest( 'citta', optionsjson3 );
-->
</script>
Nella parte della query, l'ho strutturata così:
Codice PHP:
<?php
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); // Date in the past
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" ); // always modified
header( "Cache-Control: no-cache, must-revalidate" ); // HTTP/1.1
header( "Pragma: no-cache" ); // HTTP/1.0
// query mysql
// ...
// inserisco i risultati della query in un array $outputResultArr
// ...
// output dati
if( isset( $_REQUEST['json'] ) ){
header( "Content-Type: application/json" );
echo "{\"results\": [";
$finalArr = array();
for( $i=0;$i<count( $outputResultArr );$i++ ){ // NB: aggiunta qui sotto utf8_encode() altrimenti i caratteri non venivano visualizzati
$finalArr[] = "{\"id\": \"".$outputResultArr[$i]['id']."\", \"value\": \"".utf8_encode( $outputResultArr[$i]['value'] )."\", \"info\": \"".utf8_encode( $outputResultArr[$i]['info'] )."\"}";
}
echo implode( ", ", $finalArr );
echo "]}";
} else {
header( "Content-Type: text/xml" );
echo "<?xml version=\"1.0\" encoding=\"utf-8\" ?><results>";
for( $i=0;$i<count( $outputResultArr );$i++ ){
echo "<rs id=\"".$outputResultArr[$i]['id']."\" info=\"".$outputResultArr[$i]['info']."\">".$outputResultArr[$i]['value']."</rs>";
}
echo "</results>";
}
// al momento attuale il box viene popolato con il contenuto di 'value'
// mentre il valore degli altri campi (prov, regione) sono messi sotto 'info'
?>