ESEMPIO : Json_encode e autocomplete di input text

Ciao a tutti, volevo condividere con voi questo esempio di chiamata asincrona(dovete avere jquery per vederlo), sperando che possa essere utile a qualche utente per studiare un pò di passaggio dei dati.

Definiamo un array in php che nel nostro caso chiameremo "nomi", ma possiamo recuperare l'array da una tabella sql da qualsiasi cosa e lo printiamo ovviamente con il json_encode, nell'html creiamo una input che chiameremo nomi, al click della input scateniamo la chiamata Ajax e come risposta prendiamo il nostro array che andremo ad inserire come autocomplete nella input dei nomi.
In php definiamo un (isset($_GET['RecuperoNomi']) per comodità se un domani vogliamo entrare in un altro isset basterà cambiare il parametro di invocazione della chiamata, il file php lo chiameremo
ajax.php
Così definito con gli isset, il nostro ajax.php diventa una sorta di server-router, ad ogni chiamata ajax può essere invocato cambiando il parametro di invocazione cambieremo la funzionalità che il parse andrà a leggere.

Nel javascript usando jquery faremo la vera e propria chiamata e definiremo l'autocomplete ovviamente l'utente può scegliere solamente i nomi che sono nell'autocomplete se ne scriverà uno diverso appena esce dalla input o clicca lo schermo la input si ripulisce.
Spero che possa essere utile...
Ciao a tutti

Codice HTML:

---


        <div class="nomi">
            <label for='nomi'>Nomi :</label>
            <input type="text" id="nomi" value="" name="nomi">
        </div>

---

Codice:

---


<script type="text/javascript">

//solo al click del tag con id=nomi scateno una chiamata
$('#nomi').click(function(){

    //facciamo una chiamata al php ajax e imposto un get RecuperoNomi
    //che mi servirà a switchare la giusta funzione nel file ajax.php
    $.ajax({
       
        //Method, url, dataType, success ed error omettiamo data: perchè non serve in questo caso
        method:"GET",
        url: "ajax.php?RecuperoNomi=",
        dataType: "json",
         
        success: function(data){
            //data è il nostro echo json
            nomi=data;
                     
        //Automplete per Modulo decodificando l'array
        $(function(){
          var nomi = data;
            $('#nomi').autocomplete({
                    //sorgente di elenco
                    source : nomi,
                   
                    //al select il valore nome selezionato dall'elenco lo passo alla input text nomi
                    select: function( event, ui ) {
                       
                        var nomeSelezionato=ui.item['value'];
                       
                        for (i=0; i<nomi.length; i++)
                        {
                            if (nomeSelezionato==nomi[i])
                            {
                                //siamo sicuri che la input avrà un valore dell'elenco autocomplete
                                $('#nomi').val(nomi[i]);
                            }
                        }
   
                    },
                    change: function (event, ui) {
                        //se il nome non appartiene ad uno dell'elenco resetto la input text a vuoto sull'onblur
                        if (ui.item == null || ui.item == undefined) {
                            $("#nomi").val("");
                        }
                    }

            });
            });                 
        },
        //Errore di chiamata
        error: function()
        {
          alert("Chiamata fallita");
        }       
    });
});

</script>

---

Codice PHP:

---


<?php

//CHIAMATELO ajax.php
//Imposto il get della chiamata posso fare tante chiamate in questo file cambiando solamente il get isset di chiamata
if (isset($_GET['RecuperoNomi'])){

//imposto un array
$modulo = array("Andrea" ,"Marco", "Luca","Giacomo","Paolo","Mario","Michele","Stefano", "Giovanni");

//splitto il mio array nel risultato della chiamata(DATA) con json_encode
echo json_encode($modulo);

}

?>

---