JQuery autocomplete en PHP:invoerveld vullen met gegevens uit mySQL-database op basis van geselecteerde optie in autocomplete-veld

Ik heb precies gebouwd deze functie in een app van mij. Er is hier een extra laag van complexiteit, in die zin dat er twee zoekacties in de buitenwijken zijn (thuis- en werkadressen), die elk overeenkomende staat- en postcodevelden vullen. De back-end is perl in plaats van PHP, maar dat is niet relevant voor de afhandeling aan de clientzijde. Uiteindelijk retourneert de back-end een JSON-structuur met een reeks hashes zoals deze:

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

De id-sleutel bevat de naam van de wijk en de waardesleutel bevat tekenreeksen zoals "JOLIET IL 60403", dus de juiste set van de gegevens wordt één keer gekozen, waardoor het probleem van meerdere steden/voorsteden met dezelfde naam op verschillende plaatsen wordt opgelost, en wordt teruggebeld om dat op te lossen.

Eenmaal geselecteerd, worden de voorstad (id), staat en pcode-waarden geïnjecteerd in de overeenkomende parameters.

De volgende code slaat ook eerdere resultaten op (en de cache wordt gedeeld tussen thuis- en werkzoekopdrachten).

$('#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();
        }
    }
});