Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
109 lines (93 sloc) 5.48 KB
<!DOCTYPE html>
<title>Fill Address Form with Autosuggest - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to use the Azure Maps Search service with JQuery UI's autocomplete widget which provides address suggestions as the user types and which populates a form with the selected suggestion." />
<meta name="keywords" content="map, gis, API, SDK, search, geocoding, geocode, autosuggest, autocomplete, jquery" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Load JQuery UI -->
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
//Get your Azure Maps key at
var subscriptionKey = '<Your Azure Maps Key>';
var addresssGeocodeServiceUrlTemplate = '{subscription-key}&api-version=1&query={query}&language={language}&countrySet={countrySet}&view=Auto';
function PageLoaded() {
//Create a jQuery autocomplete UI widget.
minLength: 3, //Don't ask for suggestions until atleast 3 characters have been typed.
source: function (request, response) {
//Create a URL to the Azure Maps search service to perform the address search.
var requestUrl = addresssGeocodeServiceUrlTemplate.replace('{query}', encodeURIComponent(request.term))
.replace('{subscription-key}', subscriptionKey)
.replace('{language}', 'en-US')
.replace('{countrySet}', 'US'); //A comma seperated string of country codes to limit the suggestions to.
url: requestUrl,
success: function (data) {
select: function (event, ui) {
//When a suggestion has been selected.
var selection = ui.item;
//Populate the address textbox values.
document.getElementById('addressLineTbx').value = (selection.address.streetNumber ? (selection.address.streetNumber + ' ') : '') + (selection.address.streetName || '');
document.getElementById('cityTbx').value = selection.address.municipality || '';
document.getElementById('countyTbx').value = selection.address.countrySecondarySubdivision || '';
document.getElementById('stateTbx').value = selection.address.countrySubdivision || '';
document.getElementById('postalCodeTbx').value = selection.address.postalCode || '';
document.getElementById('countryTbx').value = selection.address.countryCodeISO3 || '';
}).autocomplete("instance")._renderItem = function (ul, item) {
//Format the displayed suggestion to show the formatted suggestion string.
var suggestionLabel = item.address.freeformAddress;
if (item.poi && {
suggestionLabel = + ' (' + suggestionLabel + ')';
return $("<li>")
.append("<a>" + suggestionLabel + "</a>")
#searchBox {
width: 400px;
.addressForm {
margin-top: 10px;
background-color: #008272;
color: #fff;
border-radius: 10px;
padding: 10px;
.addressForm input {
width: 265px;
<body onload="PageLoaded()">
<input type='text' id='searchBox' />
<table class="addressForm">
<tr><td>Street Address:</td><td><input type="text" id="addressLineTbx" /></td></tr>
<tr><td>City:</td><td><input type="text" id="cityTbx" /></td></tr>
<tr><td>County:</td><td><input type="text" id="countyTbx" /></td></tr>
<tr><td>State:</td><td><input type="text" id="stateTbx" /></td></tr>
<tr><td>Zip Code:</td><td><input type="text" id="postalCodeTbx" /></td></tr>
<tr><td>Country:</td><td><input type="text" id="countryTbx" /></td></tr>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Fill Address Form with Autosuggest</legend>
This sample shows how to use the Azure Maps Search service with <a href="">JQuery UI's autocomplete widget</a> which provides address suggestions as the user types and which populates a form with the selected suggestion.
You can’t perform that action at this time.