Completamento automatico con valori diversi rispetto al titolo

Question

Sto cercando di creare un modulo di completamento automatico usando jquery, ma ho riscontrato un problema. Sto cercando di farlo in modo che quando un utente inizia a digitare il nome di un posto nel nostro database, mostri loro il nome completo del luogo nel completamento automatico, ma quando fanno clic su di esso, la casella di testo viene riempita con l'indirizzo del luogo che può essere localizzato con google maps. Quale sarebbe il modo migliore per raggiungere questo obiettivo?

Answer 1

Ecco uno schizzo molto approssimativo di un po 'di codice che ti farà iniziare. Non è affatto completo, ma dovrebbe darti un buon punto di partenza. Spero che sia d'aiuto

$("#mySearchBox").change(function(){
/*
    send a ajax request to receive a json object.
    We use the callback function to populate the 
    a div tag "autocomplete" with the names
*/
$.getJSON("http://myurl.com/myPage?search="+$(this).val()
        function(data){
          $.each(data.items, function(i,item){
            /*
                Assume item looks like this

                item = {[{"address": 100 Main st",
                           "name": "Bob and Joe's Dinner"],
                            ...
                       }
            */              
                /* Populate autocomplete with new spans
                   We use the text attribute to hold the address
                   You may want to look in to jquery data() feature. 
                */
                $("#autoComplete").append('<span text="'+ item.address +
                                          '" class="searchResult">'+ item.name +'</span>');
          });
        });

});

$("#autoComplete .searchResults").click(function(){
    /*  
        Here we handle what the user clicks on.
        Pull out the address from the attr and 
        put that back in the mySearchBox
    */
    var address = $(this).attr("text");

    //Load the adress back int the textfield
    $("#mySearchBox").val = address;
});

Answer 2

Probabilmente passa in tutta la "Persona" oggetto in JavaScript utilizzando un oggetto JSON. Quindi puoi scegliere dove vuoi che vada ogni pezzo dell'oggetto.