如何在此服务中使用jQuery自动完成？

Question

更新了对不起，我应该澄清这个更好！我使用一个2阶段的webservice，第一个调用返回完整的街道地址，然后可以用键返回地址部分。要做到这一点，我想使用jQuery自动完成组件，但我不知道如何做。

这里是第一个webservice，它用一个键返回完整的地址，然后可以用来对地址部分进行后续请求：。

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

})

和在这里进行后续调用，以返回特定选择的JSON --这是我最终需要在db中保存的信息

结果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) { 

        }

    });