Jquery autocomplete et PHP :remplissage du champ de saisie avec les données de la base de données mySQL en fonction de l'option sélectionnée dans le champ de saisie semi-automatique

J'ai construit exactement cette fonction dans une de mes applications. Il y a une couche supplémentaire de complexité ici, en ce sens qu'il y a deux recherches de banlieue (adresses du domicile et du travail), chacune remplissant les champs d'état et de code postal correspondants. Le back-end est perl plutôt que PHP, mais ce n'est pas pertinent pour la gestion côté client. En fin de compte, le back-end renvoie une structure JSON avec un tableau de hachages comme celui-ci :

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

La clé d'identification contient le nom de la banlieue et la clé de valeur contient des chaînes telles que "JOLIET IL 60403", donc le bon ensemble des données sont choisies une fois, résolvant le problème de plusieurs villes/banlieues portant le même nom à différents endroits, et effectuant des rappels pour résoudre ce problème.

Une fois sélectionnées, les valeurs de banlieue (id), d'état et de pcode sont injectées dans les paramètres de correspondance.

Le code suivant met également en cache les résultats précédents (et le cache est partagé entre les recherches domicile et travail).

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