jQuery
Integrate the Address Suggest API using jQuery with a debounced input and clickable results.
Dependencies
Include jQuery (e.g. from CDN):
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> HTML
<input id="address-input" type="text" placeholder="Type an address…" />
<ul id="address-results"></ul> JavaScript
// Load config (or use your API URL and key)
$.getJSON("/config.json", function(config) {
var apiUrl = config.addressApiUrl;
var apiKey = config.addressApiKey;
var debounceTimer;
$("#address-input").on("input", function() {
var keyword = $(this).val().trim();
clearTimeout(debounceTimer);
if (!keyword) {
$("#address-results").empty();
return;
}
debounceTimer = setTimeout(function() {
$.ajax({
url: apiUrl + "/address-api-v1/au/address/suggest",
data: { keyword: keyword, limit: 10 },
headers: { "x-auth-key": apiKey },
success: function(data) {
var items = data.items || [];
var html = items.map(function(item) {
return "<li data-address='" + item.address_line_1 + "'>" + item.address_line_1 + "</li>";
}).join("");
$("#address-results").html(html || "<li class='text-muted'>No results</li>");
}
});
}, 300);
});
$(document).on("click", "#address-results li", function() {
$("#address-input").val($(this).data("address"));
$("#address-results").empty();
});
}); Try it
Live example:
Notes
- Debouncing — Use
setTimeoutto delay API calls while the user types. - API key — In production, call the API via a backend proxy to keep your key server-side.
- Endpoint —
GET http://localhost:8383/address-api-v1/au/address/suggest?keyword=…&limit=10