Local prototype · simulated data

Browser widget

An accessible autocomplete component with no dependencies. It is part of the local prototype and is not published to a CDN yet.

Prototype. Load it from the local server. A hosted script and npm package are Planned.

Usage

HTML

<label for="address1">Address line 1</label>
<input id="address1" name="address1">

<script type="module">
  import { createAutocomplete } from "http://localhost:8787/widget/autocomplete.js";

  createAutocomplete(document.getElementById("address1"), {
    endpoint: "http://localhost:8787/v1",
    apiKey: "pk_test_PLACEHOLDER", // publishable key with this page's origin on its allowlist
    fields: {
      secondary: document.getElementById("address2"),
      city: document.getElementById("city"),
      state: document.getElementById("state"),
      zip: document.getElementById("zip"),
    },
    onSelect(address) { console.log(address); },
  });
</script>

Accessibility

WAI-ARIA 1.2 combobox with a listbox popup: aria-expanded, aria-controls and aria-activedescendant are kept in sync.
Keyboard: arrow keys move, Enter selects, Escape closes, Tab leaves. Focus never leaves the input.
Result counts, selections and errors are announced through a polite live region.
Checked with axe-core in automated tests. Screen-reader testing with VoiceOver and NVDA has not been done yet.

Options

Widget options
Option	Default	Purpose
`endpoint`	`/demo`	Base path; the widget calls `/autocomplete` and `/addresses/:id` under it.
`apiKey`	none	Publishable key, sent as a Bearer header.
`minChars`	`2`	Characters before the first request.
`debounceMs`	`150`	Pause after typing before a request.
`limit`	`5`	Suggestions per request (1–10).
`fields`	`{}`	Inputs filled on selection: `secondary`, `city`, `state`, `zip`.
`onSelect`	no-op	Called with the selected address.