Predictive Sample

Search + Retrieve

by dtsupport

HTML

<link rel="stylesheet" href="https://kleber.datatoolscloud.net.au/jquery19/themes/base/jquery.ui.all.css">
<script src="https://kleber.datatoolscloud.net.au/jquery19/jquery-1.9.1.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.core.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.widget.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.position.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.autocomplete.js"></script>
<script src="https://kleber.datatoolscloud.net.au/jquery19/ui/jquery.ui.menu.js"></script>
<body>

<div style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; padding-left: 250px; background-color: rgb(255, 255, 255);">
	<form>
		<table>
			<tr>
				<td>Address Line:</td>
				<td style="width: 10px;"></td>
				<td>
				<input name="Address line 1" id="addline1" type="text" size="50" />
				</td>
			</tr>
			<tr>
				<td>Suburb:</td>
				<td style="width: 10px;"></td>
				<td><input name="Suburb" id="suburb" type="text" size="30" /></td>
			</tr>
			<tr>
				<td>State:</td>
				<td style="width: 10px;"></td>
				<td><input name="State" id="state" type="text" size="10" /></td>
			</tr>
			<tr>
				<td>Postcode:</td>
				<td style="width: 10px;"></td>
				<td>
				<input name="Postcode" id="postcode" type="text" size="10" /></td>
			</tr>
			<tr>
				<td>Country:</td>
				<td style="width: 10px;"></td>
				<td><input name="Country" id="country" type="text" size="20" /></td>
			</tr>
      <tr>
				<td>DPID:</td>
				<td style="width: 10px;"></td>
				<td><input name="Dpid" id="dpid" type="text" size="20"...

CSS

.ui-autocomplete-loading {
        	background: white url('http://dt0200.datatoolscloud.net.au/dt_jsonp/ui-anim_basic_16x16.gif') right center no-repeat;
        }

JavaScript

$(function()

{
		
$('#addline1').autocomplete(
		{
			source: function( request, response ) 
			{				
				
				$.ajax(
				{

				url: "https://Kleber.datatoolscloud.net.au/KleberWebService/DtKleberService.svc/ProcessQueryStringRequest",
					dataType: "jsonp",					
					type: "GET",
					contentType: "application/json; charset=utf-8",
					data: {OutputFormat:"json", ResultLimit:10, AddressLine:request.term, Method:"DataTools.Capture.Address.Predictive.AuPaf.SearchAddress", RequestKey:""},
					success: function( data ) 
					{
						$('#dpid').val("");
						response( $.map( data.DtResponse.Result, function( item ) 
						{	
							
							var Output = (item.AddressLine + ", " + item.Locality + ", " + item.State + ", " + item.Postcode);
							return {label: Output,value: Output,Output: Output,	RecordId: item.RecordId,AddressLine: item.AddressLine};
						}));
					}
				});
			},

			select: function( event, ui ) 
			{
				$.ajax(
				{
					url: "https://Kleber.datatoolscloud.net.au/KleberWebService/DtKleberService.svc/ProcessQueryStringRequest",
					dataType: "jsonp",
					
					crossDomain: true,
					data: {OutputFormat:"json", RecordId:ui.item.RecordId, Method:"DataTools.Capture.Address.Predictive.AuPaf.RetrieveAddress", RequestKey:""},
					success: function (data) 
					{
						$.map(data.DtResponse.Result, function (item) 
						{							
							$('#addline1').val(ui.item.AddressLine);
							$('#suburb').val(item.Locality);
							$('#state').val(item.State);
							$('#postcode').val(item.Postcode);
							$('#dpid').val(item.DPID);
							//displayMapAddress(ui.item.AddressLine + ", " + item.Locality + " " + item.State + " " + item.Postcode);     
						});
					}
				});
			},
		});
	});