Add address autocomplete to an existing field

Include form.js and add data-parse="address" to your input. Suggestions, keyboard navigation, and selection are handled for you.

JavaScript (browser)Last tested Sep 6, 2026Get the complete example ↓

On this page

Working example

HTML + form.js

Add two lines

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" defer></script>
<input id="address" name="address" data-parse="address" placeholder="Start typing an address">

Replace YOUR_PUBLIC_API_KEY with a Public key from the keys page. Add your site's hostname to that key's allowed domains. For local development, add localhost.

That's it. 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.

Autocomplete helps with entry, not postal delivery verification. If suggestions are unavailable, the field stays editable and your form still works.

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.

Download HTML

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" defer></script>
    <input id="address" name="address" data-parse="address" placeholder="Start typing an address">
    <!-- /example:form -->
  </main>
</body>
</html>

Need a key? Create a public API key. For every field and parameter, see Address API reference.