PHP: Esempio di autocomplete JSON estrapolato da tabella MYSQL
Un pò di tempo fa ho messo un esempio di autocomplete, usando jquery, recuperando un array dal php con json_encode ed inserendo l'array nell'autocomplete della input text dell'html, questa sera posto lo stesso esempio ma un pò più articolato, prenderemo tutti i campi di una tabella, ID e CAMPO e creeremo un autocomplete di questi campi di tabella che inseriremo nella nostra input text html, creiamo tre file, uno html uno php ed uno javascript , il php lo chiamiamo ajax.php l'html lo chiameremo home.html e javascript file lo chiamiamo funzioni.js, nell'head dell'html includeremo le librerie jquery e funzioni.js anche se il codice javascript per l'autocomplete lo possiamo scrivere sotto l'html, è indifferente.
Da notare che recuperiamo sia l'id che il campo della tabella(il campo sarà convenzionalmente REGIONI) l'id ci servirà in hidden perchè dovremo dire a quel determinato id corrisponde la nostra descrizione della regione nella tabella per esempio "Italia" ,che vogliamo recuperare.
Quindi abbiamo una tabella Italia con campi id, città, regioni , noi inseriremo nella nostra input text le regioni presenti nella tabella Italia in autocomplete.
Partiamo con il codice HTML home.html, ometto l'intestazione etc..etc...metto solo l'input dove andremo a valorizzare il nostro autocomplete e l'hidden per il recupero id.
Codice HTML:
<div class='contenitore'>
<input type='hidden' id='idRegione' name='idRegione' value="">
<label for='InserisciRegione'>Regione :</label>
<input type='text' id='Regione_Id' name='TxtRegione' value="" title="Regione">
</div>
Codice PHP:
<?php
//il nostro file ajax.php dove apriremo la connessione al db e recupereremo tutti gli id e le relative regioni presenti //nella Tabella Italia
$azione=$_REQUEST['azione'];//definiamo un parametro azione e facciamo lo switch in questo caso REGIONI
switch($azione){
////INVOCAZIONE CHIAMATA REGIONI--------------------------------------------------------------
case "regione":
//Apriamo il Db phpMyAdmin
$db = new mysqli("host", "user", "password", "nomeDB");
if ($db->connect_errno) {
echo "Impossibile connettersi a MySQL: (" . $db->connect_errno . ") " . $db->connect_error;
}
//creiamo una select per definire l'array per ricerca
//autocomplete di regioni, l'autocomplete si basa sul campo "regione" della tabella Italia
$sqlRegioni = ("SELECT * FROM Italia");
$RegioniPHP = array();
foreach ($db->query($sqlRegioni) as $risultato) {
$nomeRegione = $risultato['regione'];
$idRegione = $risultato['id'];
//il nostro array bidimensionale con ID e NOME della REGIONE
$RegioniPHP[] = array($idRegione, $nomeRegione);
}
//recuperiamo con json encode e facciamo uno string replace per codificare in maniera corretta l'array a livello html
$RegioniPHP = json_encode($RegioniPHP);
$RegioniPHP = str_replace('"', "'", $RegioniPHP);
//printiamo il nostro risultato
echo $RegioniPHP;
//Chiude Mysql DB
$db->close();
break;
//DEFAULT SWITCH
default:
echo "Errore Router-Ajax";
}
?>
Adesso facciamo tutto con Jquery al focus della input text name=TxtRegione inseriamo le regioni presenti nel db, ovviamente l'utente può e deve scegliere solo una regione presente nell'elenco se scrive a caso la input viene ripulita all'onblur, è obbligato ad inserire uno dei valori che gli imponiamo noi.
Codice:
<script type="text/javascript">
$('#Regione_Id').focus(function(){
$.ajax({
type: "GET",
url: "ajax.php?azione=regione",
dataType: "html",
success:function(data){
//alert(data);
//usiamo eval data perchè codifica correttamente il json alcuni usano anche //JSON.parse() ma a me funziona bene con eval ;)
var listaRegioni = eval(data);
var listaNomiRegioni=[]; //creiamo un array per i nomi delle regioni
for (i=0; i<listaRegioni.length; i++)//scorriamo tutto la lunghezza dell'array
{
listaNomiRegioni[i]=listaRegioni[i][1]; //l'array è bidimensionale i nomi delle regioni sono nella seconda voce cioè 1
}
//generiamo l'autocomplete inserendo in nostro listaNomiRegioni come sorgente di ricerca
$('#Regione_Id').autocomplete({
source:listaNomiRegioni,
select: function( event, ui ) {
var regioneSelezionata=ui.item['value']; //regione selezionata è l'elemento jquery value
for (i=0; i<listaRegioni.length; i++)
{
if (regioneSelezionata==listaRegioni[i][1])
{
$('#idRegione').val(listaRegioni[i][0]); //questo è il nostro ID della regione selezionata
//questa volta la voce è la prima cioè 0, l'array è strutturato [id, NomeRegione]
}
}
},
change: function (event, ui) {
//se la regione non appartiene ad una dell'elenco resetto la input
if (ui.item == null || ui.item == undefined) {
$("#Regione_Id").val("");
}
}
});
},
error:function (){
alert ('Chiamata Fallita');
}
});
});
</script>
