Autocomplete avec des valeurs différentes de celles du titre

Question

J'essaie de créer un formulaire de saisie semi-automatique à l'aide de jQuery, mais j'ai rencontré un problème. J'essaie de faire en sorte que lorsqu'un utilisateur commence à taper le nom d'un lieu figurant dans notre base de données, le nom complet de celui-ci s'affiche dans la saisie semi-automatique, mais lorsqu'il clique dessus, la zone de texte est remplie. l'adresse du lieu qui peut être localisé avec google maps. Quel serait le meilleur moyen d'y parvenir?

Answer 1

Voici un aperçu très approximatif d’un code qui vous permettra de commencer. En aucun cas, il est complet, mais il devrait vous donner un bon point de départ. J'espère que ça aide

$("#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

Transmettez probablement l'intégralité de " Personne " objet en javascript à l'aide d'un objet JSON. Ensuite, vous pouvez choisir où vous voulez que chaque morceau de l'objet aille.