Widget configuration

Configure the autocomplete widget

The v1 widget is designed for small, explicit configuration: choose an input, point at an index, set a result limit, and decide what to do when an address is selected.

Advanced config

<input id="address" name="address" autocomplete="off">
<input type="hidden" id="selected_address" name="selected_address">
<input type="hidden" id="streetkit_id" name="streetkit_id">
<input type="hidden" id="address_line_1" name="address_line_1">
<input type="hidden" id="address_line_2" name="address_line_2">
<input type="hidden" id="suburb" name="suburb">
<input type="hidden" id="town_city" name="town_city">
<input type="hidden" id="postcode" name="postcode">
<input type="hidden" id="territorial_authority" name="territorial_authority">
<input type="hidden" id="dataset_version" name="dataset_version">

<script src="https://streetkit.smp.kiwi/widget/streetkit.js"></script>
<script>
  StreetKit.init({
    input: "#address",
    indexBaseUrl: "https://index.streetkit.smp.kiwi/v1",
    limit: 8,
    onSelect(address) {
      document.querySelector("#selected_address").value = address.display.label;
      console.log("Selected address", address);
    },
    fields: {
      line1: "#address_line_1",
      line2: "#address_line_2",
      suburb: "#suburb",
      townCity: "#town_city",
      postcode: "#postcode",
      territorialAuthority: "#territorial_authority",
      streetkitId: "#streetkit_id",
      datasetVersion: "#dataset_version"
    }
  });
</script>

Common options

input: Required. CSS selector or input element to attach the widget to.
indexBaseUrl: Base URL for the static index. Use the hosted URL or your own CDN path.
limit: Maximum number of suggestions to show. The default is intentionally small.
minLength: Minimum query length before search starts. The local default is 3 characters.
debounceMs: Delay between typing and search. Use this to tune the form interaction.
onSelect: Callback called with the selected address object.
fields: Optional field map for populating hidden structured form inputs.

Custom index URL

Use a custom indexBaseUrl when testing local fixtures, pointing at a staging index, or self-hosting static StreetKit index files.

StreetKit.init({
  input: "#address",
  indexBaseUrl: "https://example-cdn.example.com/streetkit/v1",
  limit: 5
});