Question

的修订版 的对不起，我应该更好地澄清一下！我使用2阶段web服务，第一个调用返回完整的街道地址，然后使用一个键，然后可以依次使用该键来返回地址部分。为此，我想使用jQuery自动完成组件，但我不知道如何做到这一点。

下面是第一个使用密钥返回完整地址的网络服务，该密钥可用于对地址部分进行跟进请求：

jsonCallback({
"Address": [
    {
        "Moniker": "03OAUSAQXcBwEDAQAAAAAvuBHAAAAAADMxABQA",
        "FullAddress": "31KhanRoad,GURRANANGNSW2460"
    },
    {
        "Moniker": "0XOAUSAQXcBwEDAQAAAAAvuBHAAAAAADMzABQA",
        "FullAddress": "33KhanRoad,GURRANANGNSW2460"
    },
    {
        "Moniker": "0POAUSAQXcBwEDAQAAAAAvuBHAAAAAADM1ABQA",
        "FullAddress": "35KhanRoad,GURRANANGNSW2460"
    },
    {
        "Moniker": "0NOAUSAQXcBwEDAQAAAAAvuBbAAAAAAAAUAA--",
        "FullAddress": "43KhanRoad,GURRANANGNSW2460"
    }
]

}）

heres后续调用返回特定选择的JSON - 这是我最终需要保存在数据库中的信息

生成的JSON对象：

jsonCallback({"Result":"OK","Address":{"DPID":"68847810","Full Address":"20 Some Ct, TRUGANINA VIC 3029","Unit Number":"","Street Number":"19","Street Name":"Khan","Street Type":"Court","Street Type Suffix":"","Suburb":"TRUGANINA","State":"VIC","Postcode":"3029","Building Name":"","Building Name 2":""}});

Answer 1

最后想出来

$( "#addressline" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://www.website.com.au/WebApp.asp?action=parse&reqtype=cnlist&ResultType=JSON&callback=?",
                dataType: "jsonp",
                data: { adddata: request.term },
                success: function( data ) {
                    //console.log(data.Address);
                    response( $.map( data.Address, function( item ) {
                        console.log(item);
                        return {
                            value: item["Moniker"],
                            label: item["Full Address"]
                        }
                    }));
                },
                error:function(){

                    alert('error');
                }

            });
        },
        minLength: 5,
        focus: function( event, ui ) {
            $( "#addressline" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) { 
            //  show label in box, not value
            $( "#addressline" ).val( ui.item.label ); 
            $( "#addressline_moniker_hidden").val(ui.item.value);
            $.ajax({
                url: "http://www.website.com.au/WebApp.asp?action=parse&reqtype=Mcntab&resulttype=JSON&callback=?",
                dataType: "jsonp",
                data: { moniker: ui.item.value },
                success: function( data ) {

                    if(data.Address){
                        console.log(data.Address);

                        // set hidden fields with verified address
                        $('#dpid').val(data.Address.DPID);
                        if(data.Address.qaserror){
                            $('#qaserror').val(data.Address.qaserror);
                        }

                        $('#unitno').val(data.Address["Unit Number"]);
                        $('#streetno').val(data.Address["Street Number"]);
                        $('#streetname').val(data.Address["Street Name"]);
                        $('#streettype').val(data.Address["Street Type"]);
                        $('#suburb').val(data.Address.Suburb);
                        $('#state').val(data.Address.State);
                        $('#postcode').val(data.Address.Postcode);

                        // show verification msg
                        $( "#addrverified" ).text('Address VERIFIED').effect("pulsate", { times:2 }, 2000);


                    }
                },
                error:function(){

                    alert('error');
                }

            });

            console.log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
            return false;

        },
        change: function(event, ui) { 

        }

    });

如何使用此Web服务使用jQuery Autocomplete？

1 个答案: