Completamento automatico Jquery e PHP:popolamento del campo di input con i dati del database MySQL in base all'opzione selezionata nel campo del completamento automatico

Ho costruito esattamente questa funzione in una mia app. C'è un ulteriore livello di complessità qui, in quanto ci sono due ricerche di periferia (indirizzi di casa e di lavoro), ciascuna delle quali popola i campi di stato e codice postale corrispondenti. Il back-end è perl anziché PHP, ma non è rilevante per la gestione lato client. In definitiva, il back-end restituisce una struttura JSON con una matrice di hash come questa:

[ { "id":"...", "value":"...", "state":"...", "pcode":"..." }, ... ]

La chiave id contiene il nome del sobborgo e la chiave del valore contiene stringhe come "JOLIET IL 60403", quindi il insieme corretto di dati viene scelto una volta, risolvendo il problema di più città/periferia con lo stesso nome in luoghi diversi e richiamando per risolverlo.

Una volta selezionati, i valori suburb (id), state e pcode vengono inseriti nei parametri corrispondenti.

Il codice seguente memorizza nella cache anche i risultati precedenti (e la cache è condivisa tra le ricerche di casa e di lavoro).

$('#hm_suburb').addClass('suburb_search').attr(
         {suburb: '#hm_suburb', pcode: '#hm_pcode', state: '#hm_state'});
$('#wk_suburb').addClass('suburb_search').attr(
         {suburb: '#wk_suburb', pcode: '#wk_pcode', state: '#wk_state'});
var sub_cache = {};
$(".suburb_search").autocomplete({
    source: function(request, response) {
        if (request.term in sub_cache) {
                response($.map(sub_cache[request.term], function(item) {
                    return { value: item.value, id: item.id,
                             state: item.state, pcode: item.pcode }
                }))
            return;
        }
        $.ajax({
            url: suburb_url,
            data: "term=" + request.term,
            dataType: "json",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            dataFilter: function(data) { return data; },
            success: function(data) {
                sub_cache[request.term] = data;
                response($.map(data, function(item) {
                    return {
                        value: item.value,
                        id: item.id,
                        state: item.state,
                        pcode: item.pcode
                    }
                }))
            } //,
            //error: HandleAjaxError  // custom method
        });
    },
    minLength: 3,
    select: function(event, ui) {
        if (ui.item) {
            $this = $(this);
            //alert("this suburb field = " + $this.attr('suburb'));
            $($this.attr('suburb')).val(ui.item.id);
            $($this.attr('pcode')).val(ui.item.pcode);
            $($this.attr('state')).val(ui.item.state);
            event.preventDefault();
        }
    }
});