Location Autocomplete using Azure Maps & typeahead.js

azure_maps_typeahead.html

<div id="remote">
  <input class="typeahead" type="text" placeholder="Type Here">
</div>

azure_maps_typeahead.js

// Replace with Azure Map Key
var azure_maps_key = "AZURE_MAP_KEY";

var azure_maps_typeahead = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'https://atlas.microsoft.com/search/address/json?subscription-key=' + azure_maps_key + '&api-version=1.0&query=%QUERY',
        wildcard: '%QUERY',
        filter: function (response) {
            var locations = [];
            $(response.results).each(function (index) {
                locations.push({
                    id: $(this)[0].id,
                    display: [$(this)[0].address.freeformAddress, $(this)[0].address.country].join(", "),
                    country: $(this)[0].address.country,
                    state: $(this)[0].address.countrySubdivision
                });
            });
            return locations;//response.countries;
        }
    }
});

$('#remote .typeahead').typeahead(null, {
    name: 'azure-maps-typeahead',
    display: 'display',
    source: azure_maps_typeahead
});