Autocompletar Jquery y PHP:completar el campo de entrada con datos de la base de datos mySQL según la opción seleccionada en el campo de autocompletar

He construido exactamente esta función en una aplicación mía. Aquí hay una capa adicional de complejidad, ya que hay dos búsquedas de suburbios (direcciones de casa y de trabajo), cada una de las cuales completa los campos de estado y código postal coincidentes. El back-end es perl en lugar de PHP, pero eso no es relevante para el manejo del lado del cliente. En última instancia, el back-end devuelve una estructura JSON con una serie de hashes como este:

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

La clave de identificación contiene el nombre del suburbio y la clave de valor contiene cadenas como "JOLIET IL 60403", por lo que el conjunto correcto de datos se elige una vez, resolviendo el problema de varias ciudades/suburbios con el mismo nombre en diferentes lugares, y haciendo devoluciones de llamadas para resolver eso.

Una vez seleccionados, los valores de suburbio (id), estado y pcode se inyectan en los parámetros coincidentes.

El siguiente código también almacena en caché los resultados anteriores (y el caché se comparte entre las búsquedas de casa y trabajo).

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