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。然后，您可以选择要在每个对象的位置进行选择。

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

2 个答案: