Jquery autocomplete dan PHP:mengisi bidang input dengan data dari database mySQL berdasarkan opsi yang dipilih di bidang pelengkapan otomatis

Saya telah membangun tepat fungsi ini ke dalam aplikasi saya. Ada lapisan kerumitan tambahan di sini, karena ada dua pencarian pinggiran kota (alamat rumah dan kantor), masing-masing mengisi kolom negara bagian dan kode pos yang cocok. Back-end adalah Perl daripada PHP, tapi itu tidak relevan dengan penanganan sisi klien. Pada akhirnya back-end mengembalikan struktur JSON dengan array hash seperti ini:

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

Kunci id berisi nama pinggiran kota, dan kunci nilai berisi string seperti "JOLIET IL 60403", jadi set yang benar data dipilih satu kali, memecahkan masalah beberapa kota/pinggiran kota dengan nama yang sama di tempat yang berbeda, dan membuat panggilan balik untuk menyelesaikannya.

Setelah dipilih, nilai suburb (id), state, dan pcode dimasukkan ke dalam parameter yang cocok.

Kode berikut juga menyimpan hasil sebelumnya (dan cache dibagi antara pencarian rumah dan kantor).

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