javascript - 使用与标题不同的值自动完成

Question

我正在尝试使用 jquery 制作一个自动完成表单，但我遇到了一个问题。我正在努力做到这一点，以便当用户开始输入我们数据库中的某个地点的名称时，它会在自动完成中向他们显示该地点的全名，但是当他们单击它时，文本框会充满可以用谷歌地图定位的地方的地址。实现这一目标的最佳方法是什么？

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

可能使用 JSON 对象将整个“Person”对象传入 javascript。然后，您可以选择您希望每个对象的位置。