Swiftcomplete Web Component

Address and what3words search in a single custom element: <swiftcomplete-search>. Type to get suggestions, select to fill your form or handle the result in JavaScript.

Features

• Address search - Postcodes, street names, full addresses.
• what3words search - Enable via API to search by three-word addresses.
• Device location - Optional biasing of results by user’s location.
• Styling - CSS variables, size/theme/variant attributes, and overridable UI. Automatically follows prefers-color-scheme by default.
• Accessible - ARIA, keyboard navigation, listbox semantics.
• Framework-agnostic - Plain HTML + script or any JS framework.

Quick start

<swiftcomplete-search
  api-key="YOUR_API_KEY"
  placeholder="Search address or postcode"
></swiftcomplete-search>

<script type="module" src="https://cdn/path/to/swiftcomplete.es.js"></script>
<script nomodule src="https://cdn/path/to/swiftcomplete.js"></script>
<script type="module">
  window.swiftcomplete.runWhenReady((api) => {
    api.setApiKey('YOUR_API_KEY'); // or set via attribute above
  });
</script>

Get an API key from Swiftcomplete.

Documentation

| Topic | Description | | ---------------------------------------------- | --------------------------------------------------------------------- | | Getting started | Installation, script vs npm, declarative and imperative usage | | Attributes | api-key, placeholder, country, variant, size, theme, etc. | | Styling | CSS variables, variants, sizes, themes, and overriding icons | | what3words search | Enabling and using what3words in the same search | | Device location | Biasing results by the user’s location | | Events | Search and field events and payloads | | Populate fields | Mapping selected results into your form fields | | Advanced | Wrapping an existing input, service API, runWhenReady |

Browser support

Modern browsers with custom elements and Shadow DOM. Use the ES module script where supported and the nomodule script as fallback.