Add address autocomplete to an existing field

Add US address autocomplete to an existing HTML input, with keyboard navigation and editable suggestions.

JavaScript (browser)Last tested Download and run ↓
On this page

Working example

HTML + form.js

Run the example

Download HTML

address-autocomplete.html

Replace YOUR_PUBLIC_API_KEY in the downloaded file with your public key. Add localhost to that key's allowed domains. In a terminal in the download folder, run:

Terminal · Python 3
python3 -m http.server 8000

Open localhost:8000/address-autocomplete.html. When publishing, add your website's hostname to the key. Keep secret keys on your server.

Need a key? Set up this example

Add address autocomplete

Include the script once and mark your address input with data-parse="address". Keep your existing label, name, and styles.

HTML
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.0.0" defer></script>
<input id="address" name="address" data-parse="address" placeholder="Start typing an address">

Suggestions appear as the person types. Click one, or use the arrow keys and Enter. The completed address stays in the same field and submits with your existing form.

Start typing

Type a house number and street. Add a city and state or ZIP in the same field to search a different place. This example supports US addresses; coverage varies by place.

The result is an address suggestion for the person to review. Keep it editable when suggestions are unavailable, and use a separate address-confirmation step if your application needs postal delivery verification.

Build directly with the Address API when you need a custom integration.

Complete example

One HTML file with your fields, styles, and the form.js include. Replace YOUR_PUBLIC_API_KEY with your public key, then run it on a domain you have added to that key.

View and copy the complete source
address-autocomplete.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Address autocomplete</title>
  <style>
    :root { color-scheme: light dark; --bg: #fff; --ink: #152029; --muted: #5e6b75; --line: #d9e2e7; --field: #f6f9fa; --accent: #007c91; --error: #b42335; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) { --bg: #0b1015; --ink: #eff7fa; --muted: #94a6b2; --line: #2c3942; --field: #121b23; --accent: #67e8f9; --error: #fda4af; }
    }
    :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1015; --ink: #eff7fa; --muted: #94a6b2; --line: #2c3942; --field: #121b23; --accent: #67e8f9; --error: #fda4af; }
    :root[data-theme="light"] { color-scheme: light; }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    body { margin: 0; padding: 24px; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, sans-serif; }
    main { max-width: 540px; margin: 0 auto; }
    label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
    input { display: block; width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); font: inherit; }
    input::placeholder { color: var(--muted); }
    input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* Your form owns these styles. form.js adds semantic markup and states. */
    input[data-parse-status="invalid"], input[data-parse-status="disposable"] { border-color: var(--error); }
    .parse-hint { margin: 6px 0 0; color: var(--muted); font-size: .875em; line-height: 1.4; overflow-wrap: anywhere; }
    .parse-hint[data-parse-status="invalid"], .parse-hint[data-parse-status="disposable"] { color: var(--error); }
    .parse-hint-suggestion { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
    .parse-hint-suggestion:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .parse-address-suggestions { margin: 6px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; overflow: hidden; }
    .parse-address-suggestions li { padding: 10px 14px; cursor: pointer; overflow-wrap: anywhere; }
    .parse-address-suggestions li + li { border-top: 1px solid var(--line); }
    .parse-address-suggestions .street { display: block; font-weight: 500; }
    .parse-address-suggestions .place { display: block; margin-top: 2px; color: var(--muted); font-size: .8em; }
    .parse-address-suggestions li[aria-selected="true"], .parse-address-suggestions li:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
    @media (max-width: 380px) { body { padding: 18px; } }
  </style>
</head>
<body>
  <main>
    <label for="address">Address</label>
    <!-- example:form -->
    <script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.0.0" defer></script>
    <input id="address" name="address" data-parse="address" placeholder="Start typing an address">
    <!-- /example:form -->
  </main>
</body>
</html>

Need a key? Set up this browser example. For every field and parameter, see Address API reference.