Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Jquery-Autovervollständigung und PHP:Füllen des Eingabefelds mit Daten aus der mySQL-Datenbank basierend auf der ausgewählten Option im Autovervollständigungsfeld

Ich habe genau gebaut diese Funktion in eine App von mir. Hier gibt es eine zusätzliche Ebene der Komplexität, da es zwei Vorort-Lookups gibt (Privat- und Arbeitsadressen), die jeweils übereinstimmende Felder für Bundesstaat und Postleitzahl füllen. Das Back-End ist eher Perl als PHP, aber das ist für die clientseitige Handhabung nicht relevant. Letztendlich gibt das Back-End eine JSON-Struktur mit einem Array von Hashes wie diesem zurück:

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

Der ID-Schlüssel enthält den Vorortnamen und der Wertschlüssel enthält Zeichenfolgen wie "JOLIET IL 60403", also das richtige set von Daten wird einmal ausgewählt, wodurch das Problem mehrerer Städte/Vororte mit demselben Namen an verschiedenen Orten gelöst wird und Rückrufe durchgeführt werden, um dies zu lösen.

Nach der Auswahl werden die Vorort- (id), Zustands- und pcode-Werte in die übereinstimmenden Parameter eingefügt.

Der folgende Code speichert auch frühere Ergebnisse (und der Cache wird von den privaten und geschäftlichen Suchen geteilt).

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