Jquery autocomplete và PHP:điền trường đầu vào với dữ liệu từ cơ sở dữ liệu mySQL dựa trên tùy chọn đã chọn trong trường autocomplete

Tôi đã xây dựng chính xác chức năng này thành một ứng dụng của tôi. Có một lớp phức tạp bổ sung ở đây, trong đó có hai tra cứu vùng ngoại ô (địa chỉ nhà riêng và cơ quan), mỗi mục điền các trường mã bưu điện và trạng thái phù hợp. Back-end là perl chứ không phải PHP, nhưng điều đó không liên quan đến xử lý phía máy khách. Cuối cùng thì back-end đang trả về một cấu trúc JSON với một mảng các hàm băm như thế này:

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

Khóa id chứa tên vùng ngoại ô và khóa giá trị chứa các chuỗi như "JOLIET IL 60403", vì vậy bộ chính xác dữ liệu được chọn một lần, giải quyết vấn đề nhiều thị trấn / vùng ngoại ô có cùng tên ở những nơi khác nhau và thực hiện gọi lại để giải quyết vấn đề đó.

Sau khi được chọn, các giá trị ngoại ô (id), trạng thái và mã pcode sẽ được đưa vào các tham số phù hợp.

Đoạn mã sau cũng lưu vào bộ nhớ cache các kết quả trước đó (và bộ nhớ cache được chia sẻ giữa tra cứu tại nhà và cơ quan).

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