Автозаполнение с другими значениями, чем заголовок

Question

Я пытаюсь создать форму автозаполнения, используя jquery, но я столкнулся с проблемой. Я пытаюсь сделать так, чтобы, когда пользователь начинает вводить имя места, которое находится в нашей базе данных, он показывает ему полное название места в автозаполнении, но когда они нажимают на него, текстовое поле заполняется адрес места, где можно найти карты Google. Каков наилучший способ сделать это?

Answer 1

Вот очень грубый набросок некоторого кода, который поможет вам начать. Это ни в коем случае не завершено, но это должно дать вам хорошую отправную точку. Надеюсь, это поможет

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

Вероятно, передать весь объект "Person" в javascript, используя объект JSON. Затем вы можете выбрать, куда вы хотите поместить каждый фрагмент объекта.