如何在此webservice中使用jQuery Autocomplete？

已更新 對不起，我應該澄清這個更好！在使用2階段web服務時，第一次調用返回完整的街道地址，然後可以依次使用該鍵來返回地址部分。要做到這一點，我想使用jQuery自動完成組件，但我不知道如何做到這一點。如何在此webservice中使用jQuery Autocomplete？

繼承人，隨着然後可以用於製造地址部分的後續請求鍵返回完整地址的第一web服務：

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

}）

而heres es後續調用返回特定選擇的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":""}});

來源

2012-06-21 htmlr

有一個問題在這裏？ – charlietfl

'槓桿'是什麼意思？ –

對不起，我整晚都覺得很難理解 - 希望我的更新能夠澄清事情 – htmlr

想通了到底

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

     } 

    });

來源

2012-06-21 12:15:27 htmlr

如何在此webservice中使用jQuery Autocomplete？

回答

相關問題