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.

<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>

<?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.

<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>

[karl94]

Ma se la risposta dello script PHP è statica (dipende solamente dal parametro azione, non da ciò che si è digitato), perché non includere direttamente l'intero array nella pagina col modulo o assieme allo script? Si risparmia una richiesta HTTP e l'autocompletamento sarebbe disponibile da subito. Con la tua soluzione invece potrebbero trascorrere anche diversi secondi tra il focus del campo di testo e la disponibilità della lista.
Infine, eval andrebbe usato con molta cautela, perché eval is evil.

esatto karl94, ma l'esempio vuole esporre le condizioni di logica di chiamata, infatti nel commento ho messo in questo "switch in questo caso zione" è sottinteso che il nostro file ajax.php diventa una sorta di router o server dove potremo in base alle nostre esigenze e cambiando il parametro azione effettuare diverse invocazioni di chiamata, se per esempio abbiamo la necessità di chiamare il db 2-3-4 volte basterà solamente definire l'url nella chiamata ajax e cambiare la variabile azione, nel nostro ajax.php switcheremo in base alle esigenze, questo evita di caricare tanti file php per ogni chiamata che effettuiamo dal lato client, in un progetto possono esserci 40-50 chiamate in base alle nostre esigenze diventerebbe molto dispersivo creare 40-50 file php.
Questa è una logica ma si può anche fare in altro modo, invece che con lo switch definendo tante funzioni nel file ajax.php fare quindi un richiamo funzione.
L'esempio vuole esporre una logica di arichitettura tra php, javascript e html, che è quella che si usa ad oggi per la maggiore, però si in questo caso specifico avendo solamente una chiamata , lo switch si può omettere, il tempo di risposta del server è comunque intorno agli 8milli secondi

Non avevo finito di leggere, e purtroppo eval in questo caso è indispensabile perchè la decodifica Json non permettere di inserire il dataType :Json va in errore, il motivo sinceramente non riesco a comprenderlo ma il parse probabilmente non interpreta il nostro array, per inserire Json.parse() bisogna comunque avere un dato pulito mentre nel nostro caso il nostro array è definito

[['1','nome'],['3','nome'],['4','nome']]

il dom restituisce il json in questo modo e non possiamo proprio usare il Json parse con il data Type Json perchè non viene codificato dal parse, una soluzione è proprio eval che molte volte sostituisce il nostro json parse. Ovviamente queste cose quando si sta programmando si riescono solamente a vedere tramite firebug ed esplorando il dom e la risposta restituita dal server, siamo noi che in base alle nostre esigenze andremo a costruirci i costrutti che ci servono, ma solamente avendo firebug aperto e controllando passo passo tutti i nostri valori ed adattarli a nostro piacimento.Il programmatore in se non fa altro che risolvere e manipolare a suo piacimento, l'esempio sopra è perfettamente funzionante in qualsiasi tabella e qualsiasi db mysqli, io personalmente ho 10 input autocomplete che chiamano 10 diverse tabella ma la struttra è più che solida, tempo di risposta circa 8 ms.Direi una bazzecola.

[karl94]

La mia critica in realtà non era relativa alla scelta dell'uso del costrutto switch, ma alla scelta di caricare una risorsa esterna che di fatto è statica solamente dopo il focus del campo che utilizzerà la medesima per l'autocompletamento. Se la risorsa è statica e verrà necessariamente caricata prima o poi (per esempio perché il campo è obbligatorio), sarebbe più semplice e veloce includere le informazioni della risorsa direttamente nello script o nella pagina.
Per quanto riguarda il tempo di risposta, questo può variare, specialmente in caso di connessioni molto poco preformanti come quelle mobili in caso di cattiva copertura.
Il caricamento dinamico può invece avere senso in casi come la scelta della regione di appartenenza dipenda ad esempio dalla scelta della nazione: in tal caso la lista di tutte le regioni per tutte le nazioni potrebbe essere eccessivamente grande, e richiedere la lista delle regioni solo una volta selezionata la nazione corretta può essere una strategia migliore.

Un momento, non possiamo includere le informazioni della risorsa dentro lo script della pagina, qui parliamo di codice che al cambiamento dei valori del DB io programmatore non vado a cambiare il codice via web, il codice deve sempre lavorare, ovviamente regioni è un esempio, si può mettere nazioni, un elenco di prodotti che può essere aggiornato ogni giorno, qualsiasi cosa, ma al cambio dei valori nella tabella il mio autocomplete si genera dinamicamente, questa è l'utilità dell'esempio,

scegli un libro:

I libri lunedì sono 4, martedì 10, mercoledì 20, quell'autocomplete genera automaticamente i libri presenti nel DB....Ehh no la chiamata al php va fatta, è sempre buona cosa arichetturalmente separare i codici html, php e javscript, io personalemente lavoro in questo modo, non amo invece per esempio l'inserimento dell'html dentro il codice php, per l'html si usano le classi php e si crea ovviamente il template nel php, perchè viene sempre letto nel php ma usando una classe e passando i valori dal php all'html tipo una cosa di questo genere.

http://www.mrwebmaster.it/php/classe...hp_7141_3.html

le variabili che passo all'html sono gestite tutte la php.

Oggi giornata piovosa e tranquilla, e stavo invece guardando la tua richiesta perchè non ti piace eval(a dire il vero anche a me, ma le perfezioni di solito si fanno a codice finito :) ), come ti dicevo se usiamo dataType :"html" in jquery eval diventa indispensabile, se invece vogliamo usare come giusto che sia dataType = "json" dobbiamo fare delle piccole modifiche al php, il codice javascript diventerà:

	$.ajax({
      type: "GET",
      url: "ajax.php?azione=regione",
      dataType: "json",

      success:function(data){
      	     //alert(data);
             //var listaRegioni= eval(data);
             var listaRegioni = data;  

//etc...etc....abbiamo cambiato il dataType e tolto l'eval

Ma questa volta nel php dobbiamo commentare la riga:

   //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; 

Il funzionamento è lo stesso ma effettivamente a me piace più scritto così...Ciao buona giornata Karl.

[alemoppo]

Un momento, non possiamo includere le informazioni della risorsa dentro lo script della pagina

Perché no?

I libri lunedì sono 4, martedì 10, mercoledì 20, quell'autocomplete genera automaticamente i libri presenti nel DB

Esatto.
Tieni presente però che ricaricando la pagina, PHP stamperà i nuovi dati dentro lo script. Quindi l'utente che aprirà la pagina martedì, visualizzerà 10 libri e non 4 proprio perché ha riaperto la pagina.

Poi ovvio: se si tratta di un PC in una biblioteca, c'é il rischio che questo non venga mai spento (?) e la pagina mai ricaricata per giorni, anche se penso sia improbabile.

Comunque se la mole dei dati è molto grande, allora sicuramente conviene fare la chiamata ajax.
Di quanto deve essere la mole di dati per giustificare l'uso di ajax? Tieni presente che non ci si fa problemi nell'includere file di modeste dimensioni nelle pagine: ad esempio nel file compresso di jQuery ci sono più di 90000 caratteri.
In un'immagine di 1MB il tutto aumenta a più di un ordine di grandezza.

Ciao!

Forse non ho capito, ma non ci sono altre soluzioni, che sappia io non posso aprire una connessione a MySql da javascript, se poi da javascript mi posso connettere al DB ed estrapolo i dati dentro la tabella del db senza chiamare il lato server questa mi è nuova.
La connessione a MySql si fa dal PHP, quindi la chiamata è indispensabile, che poi uno la voglia fare con jquery o pippo o pluto ma deve comunque farla.Altrimenti non ho ben capito, mettete un esempio di quello che dite così ci capiamo, il codice parlo meglio delle parole alcune volte.
L'esempio è chiaro, ho una tabella con un campo che devo recuperare perchè a lato client l'operatore deve inserire un qualcosa, tipo ho 100 libri e devo fare una scheda di un cliente che compra un libro nella mia input verranno messi tutti i libri presenti in autocomplete e compilerò il mio form a fine compilazione salverò su un'altra tabella le informazioni di acquisto di quel cliente.
La chiamata va fatta per forza, non capisco veramente cosa volete dire, avete un esempio pratico?
Volete elencare tutte le regioni in questo caso oppure tutti i libri oppure qualsiasi altra cosa direttamente nel codice javascript?
Ma è assurdo

Un esempio?

Poi ovvio: se si tratta di un PC in una biblioteca, c'é il rischio che questo non venga mai spento (?) e la pagina mai ricaricata per giorni, anche se penso sia improbabile.

?????questa proprio non la capisco Alemoppo, cosa c'entra se il computer viene spento o no?
La chiamata va a leggere i dati nel timestamp del momento, cioè mi spiego meglio alle 16.44 faccio un upload al db ed aggiungo libri alla mia tabella, anzi aggiungo regioni alla mia tabella Italia, alle 16.45 l'opratore apre la form arriva un cliente e l'autocomplete è aggiornato.
Ovviamente se l'operatore sta facendo un salvataggio nella form ma il db è impegnato in scrittura proprio in quel momento, questo a lavoro si risolve bloccando l'operatività fino a quando non finisce la scrittura.

E' come dici tu, o elencarli tutti nel javascript "creandoli" da php (ovvero php e fai echo di tutti i valori che poi si prenderà js), oppure appena si carica la pagina fai una chiamata ajax che prende tutti i record per poi non effettuare più chiamate.

Per selezionare le regioni io sinceramente consiglio di metterle in json dentro un file di testo e includere quello. E' più veloce a livello di esecuzione e le regioni non cambieranno da qui a poco :P
Poi se si vuole fare esercizio per capire come funziona ajax è un altro conto, naturalmente si parte da cose base e le regioni sono ottime ;)



La cosa è questa, conviene fare ogni volta una chiamata al server stressandolo ogni volta che digito un nuovo carattere, e perdendo tempo per l'instradamento, l'autenticazione e la risposta?
Oppure conviene scaricarmi prima tutto in locale, tenermelo in un mega array js e poi ogni volta cercare la dentro?

Come al solito per me "dipende".
Dipende dall'utilizzo e dalla mole di dati, se hai 1GB di dati è naturale che non lo scarichi in locale XD
Credo che fino a 1 MB puoi scaricare in locale senza troppi problemi, oltre dipende dalla connessione... e considerando quelle più deboli o mobili diventa un "peso" eccessivo.

Io per un DB che gestisce magazzino scarico i settori che interessano allo user (esempio materiale del cliente Ferrari (sui 2k di record)) scarico tutto in locale, e si possono cercare istantaneamente i seriali, modello della macchina, quando è uscito o entrato il materiale ecc ecc... attualmente nessuno si è mai lamentato di latenza a inizio pagina :P
Ci mette circa un secondo ma poi va come una scheggia non richiedendo più connessione.


Detto la mia, bye!

Poi ovvio: se si tratta di un PC in una biblioteca, c'é il rischio che questo non venga mai spento (?) e la pagina mai ricaricata per giorni, anche se penso sia improbabile.

La frase vuole intendere che se carico tutto al caricamento della pagina, quella pagina avrà il db nel momento in cui è stato richiamato.
Qundi se apro la pagina, mi scarica il Db, attendo un ora, e poi inizio a fare la ricerca, se sono stati inseriti altri record in quel ora io non li visualizzerò.
Cmq basterebbe fare un refresh ogni ora con un dialog che ti dice "Sei su questa pagina da un ora! Potrebbe essere non aggiornata, vuoi eseguire un refresh ora?"

Ahh behh certamente, io ho scritto regioni ma ovviamente l'esempio non è per un array fisso ma per un array che cambia e viene aggiornato, forse era meglio libri, però è il concetto che conta.
Io lavoro in questo modo perchè tutto quello che viene inserito o recuperato va a finire nel DB e ripreso dal DB, se faccio una modifica via web scriverò a fine sul DB con una stored procedure, ed essendo i due ambienti gestiti separatamente per forza si fanno chiamate in continuazione, poi per il tempo dipende anche dal server che si usa a dire il vero.
Le regioni era un'esempio ma il concetto era azzeccato perchè quando noi andiamo a compilare un form con città, cap, vie in Italia, non si fa altro che quello che abbiamo fatto in quest'esempio perchè esistono tabelle ad hoc chiamate appunto territoriali dove si recuperano le vie censite, le città i cap etc...

Yep! allora state facendo bene come state facendo, ajax a gogo! !! :P

Ehh ma io sono innamorato del mio lavoro, pensa che gestiamo questa applicazione che avrà circa un 500 tabella sul DB che avranno 100 anni mentre la parte web hanno iniziato a gestirla con php credo da una decina d'anni, la logica è sempre stata questa ma noto che chi ha sviluppato all'inizio faceva tutto a basso livello quindi queste chiamate fatte con javascript a basso livello che non si possono leggere perchè per passare i parametri sai parametro[1]= chiave, parametro[1]="valore" e poi riprendevano nel php un macello :D
Da quando ci hanno detto di occuparci della manutenzione, sviluppo, bug fix etc...abbiamo migliorato nettamente le funzionalità ed è spettacolare l'unione che c'è tra html, javascript e php, io personalmente nasco con C# quindi visual studio dot net ma da quando sono su php e gestione dati lato web me ne sono innamorato.
E qui entra l'utilità di jquery, per esempio quando non so ci richiedono delle funzionalità tipo, abbiamo una tabella che ha 500 record per esempio ci sono i generi dei film e ti chiedono vogliamo una input che dinamicamente se scriviamo A nella input la tabella si aggiorna senza ricaricare la pagina e fa vedere solo i generi che iniziano con A quindi azione avventura se scrivi "av" tutti quelli che iniziano con av....se ripulisci la input torna la tabella iniziale, ecco per queste query, Jquery è l'ideale in 4 righe ti crea tutto, senza ovviamente chiamare il DB, perchè noi quando chiamiamo il DB o si scrive o si legge, devi fare una stored apposta per la funzionalità richiesta.
Io mi sono innamorato nel vero senso della parola, perchè mi diverto come un bambino e si impara tanto :)
Ma del resto php è l'ideale proprio per creare questa unione tra DB, html, javascript, è proprio completo.