Skip to main content

Add Address Autofill to an HTML form (Custom Elements)

This example implements Address Autofill to automatically add suggestions to an existing HTML form. Using the HTML custom element <mapbox-address-autofill> from Search JS Web makes it easy to add Address Autofill functionality without writing JavaScript and works well for simple applications. To use JavaScript to setup Address Autofill - see the Address Autofill example

Address Autofill works with browser HTML autocomplete tags and form inputs must have autocomplete attributes declared for Address Autofill to work.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add Address Autofill to an HTML form (Custom Elements)</title>
<!-- Default styling. Feel free to remove! -->
<link href="https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css" rel="stylesheet">
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.5.1/web.js"></script>
</head>
<body>
<form class="prose flex flex--column">
    <h3>Shipping</h3>

    <mapbox-address-autofill access-token="YOUR_MAPBOX_ACCESS_TOKEN">
        <input class="input mb12 bg-white" name="address" autocomplete="shipping address-line1" placeholder="Address">
    </mapbox-address-autofill>

    <input class="input mb12 bg-white" name="apartment" autocomplete="shipping address-line2" placeholder="Apartment">
    <div class="flex">
        <input class="input mb12 bg-white" name="city" autocomplete="shipping address-level2" placeholder="City">
        <input class="input mb12 ml6 bg-white" name="state" autocomplete="shipping address-level1" placeholder="State">
        <input class="input mb12 ml6 bg-white" autocomplete="shipping postal-code" placeholder="ZIP / Postcode">
    </div>

    <h3>Billing</h3>

    <mapbox-address-autofill access-token="YOUR_MAPBOX_ACCESS_TOKEN">
        <input class="input mb12 bg-white" name="address" autocomplete="billing address-line1" placeholder="Address">
    </mapbox-address-autofill>

    <input class="input mb12 bg-white" name="apartment" autocomplete="billing address-line2" placeholder="Apartment">
    <div class="flex">
        <input class="input mb12 bg-white" name="city" autocomplete="billing address-level2" placeholder="City">
        <input class="input mb12 ml6 bg-white" name="state" autocomplete="billing address-level1" placeholder="State">
        <input class="input mb12 ml6 bg-white" name="postcode" autocomplete="billing postal-code" placeholder="ZIP / Postcode">
    </div>
</form>

<!--  No Javascript needed with HTML custom elements
    <script></script>
-->

</body>
</html>
Was this example helpful?