Jquery स्वत:पूर्ण और PHP:स्वत:पूर्ण फ़ील्ड में चयनित विकल्प के आधार पर mySQL डेटाबेस से डेटा के साथ इनपुट फ़ील्ड को पॉप्युलेट करना

मैंने बिल्कुल . बनाया है यह मेरे एक ऐप में काम करता है। यहां जटिलता की एक अतिरिक्त परत है, जिसमें दो उपनगर लुकअप (घर और काम के पते) हैं, प्रत्येक पॉप्युलेटिंग मिलान राज्य और पोस्टकोड फ़ील्ड हैं। बैक-एंड PHP के बजाय पर्ल है, लेकिन यह क्लाइंट-साइड हैंडलिंग के लिए प्रासंगिक नहीं है। अंतत:बैक-एंड हैश की एक सरणी के साथ एक JSON संरचना लौटा रहा है:

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

आईडी कुंजी में उपनगर का नाम होता है, और मान कुंजी में "JOLIET IL 60403" जैसे तार होते हैं, इसलिए सही सेट डेटा का एक बार चयन किया जाता है, अलग-अलग जगहों पर एक ही नाम के कई कस्बों/उपनगरों की समस्या को हल करना, और इसे हल करने के लिए कॉल-बैक करना।

एक बार चुने जाने के बाद, उपनगर (आईडी), राज्य और pcode मानों को मिलान करने वाले मापदंडों में अंतःक्षिप्त किया जाता है।

निम्न कोड पिछले परिणामों को भी कैश करता है (और कैश को घर और कार्य लुकअप के बीच साझा किया जाता है)।

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