;
};
**Reduce address entry errors and improve data quality with real-time address autocomplete as users type.**
## Who Should Use This Guide
**For:** Business owners and developers integrating address autocomplete without complex setup.
**You'll need:** A Loqate API key and basic HTML knowledge.
**Not covered:** Tag-based integrations ([see Tag Setup](/our-services/tag-setup-guide)) or pre-built platform integrations ([see Integrations](/integrations/all-integrations)).
## What You'll Build
An address autocomplete form that:
* Shows address suggestions as users type
* Fills in complete address details when selected
* Works with addresses in over 250 countries
* Provides formatted address lines for easy form population
## Quick Start
To set up Address Capture, you'll need an API key. Find out how to get yours [here](/loqate-basics/create-an-api-key/).
### Choose Your Approach
**Use case:** Testing the API or adding to a static page
A self-contained HTML file you can copy and use immediately.
Jump to [standalone HTML example](#standalone-html-example)
**Use case:** Add autocomplete to your current checkout or registration forms
Step-by-step guide to add autocomplete code to forms you already have.
Jump to [integration example](#integration-example)
**Using Shopify or WordPress?** Check [pre-built integrations](/integrations/all-integrations).
### Add Your Key
Replace `YOUR_API_KEY` in the code with your actual Loqate API key.
### Test
1. Open your page
2. Start typing an address like "10 Downing"
3. Select from the suggestions
4. Complete address populates automatically
Address Capture supports over 250 countries and territories. Use the Countries parameter to restrict results to specific countries.
***
## Sample Project: Checkout Form Integration
This walkthrough shows how to add address autocomplete to a checkout form. Follow along to see a basic form transform into an intelligent address capture form.
This is a detailed walkthrough. If you just want working code, skip to [Integration Example](#integration-example) or [Standalone HTML Example](#standalone-html-example).
### Before: Manual Address Entry
A checkout form with manual address entry:
**This form works, but users must type complete addresses manually.** Let's add autocomplete.
***
## How Address Capture Works
Address Capture uses a two-step process:
### 1. Find Step
**What it does:** Searches for addresses as users type.
**When to use:** On every keystroke or with debouncing (recommended).
**What you get:** A list of matching addresses and containers (groups of addresses).
**API endpoint:** `https://api.addressy.com/Capture/Interactive/Find/v1.10/json6.ws`
**Key parameters:**
* `Text` - The search term (what the user typed)
* `Container` - Optional ID for drilling down into results
* `Countries` - Optional filter (e.g., "GBR" for UK only)
### 2. Retrieve Step
**What it does:** Gets the complete address details.
**When to use:** When a user selects an address from the suggestions.
**What you get:** Full address in multiple formats (lines, elements, label).
**API endpoint:** `https://api.addressy.com/Capture/Interactive/Retrieve/v1.00/json6.ws`
**Key parameter:**
* `Id` - The unique address identifier from Find results
### How They Work Together
```
User types "10 Dow"
↓
Find API returns suggestions
↓
User selects "10 Downing Street"
↓
Retrieve API returns complete address
↓
Form fields populate automatically
```
***
## Standalone HTML Example
A minimal address autocomplete form for quick testing:
**Perfect for:**
* Quick API testing
* Learning how address autocomplete works
* Simple integrations without checkout flows
**To use:**
1. Copy the code
2. Replace `YOUR_API_KEY`
3. Save and test with different addresses
This example searches all countries by default. Add a Countries parameter to restrict results.
## Code on GitHub
If you'd like to browse the code snippets in this implementation guide or clone them, visit the repository on [GitHub](https://github.com/loqate/javascript-docs-sample/tree/main/address-capture).
## Integration Example
Here's the checkout form with full address autocomplete integrated:
**To use this code:**
1. Copy the code
2. Replace `YOUR_API_KEY` with your actual Loqate API key
3. Save as an HTML file
4. Open in a browser to test
5. Customize styling to match your brand
**Key features in this example:**
* Real-time address suggestions as users type
* Debounced API calls to reduce requests
* Automatic form population on selection
* Support for multiple countries
* Clean, production-ready code structure
This example uses debouncing (300ms delay) to reduce API calls while users type. Adjust the delay based on your needs.
***
## Integration Tips
### Adding to Your Existing Forms
To add address autocomplete to your current forms:
1. **Add the autocomplete functions** from the integration example to your page's `