Sidebar

Mobile navigation sidebar

Developer console

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 setTimeout to delay API calls while the user types.
    • API key — In production, call the API via a backend proxy to keep your key server-side.
    • EndpointGET http://localhost:8383/address-api-v1/au/address/suggest?keyword=…&limit=10