Skip to main content

Autofill suggestions

Additional Developer Resources

This example uses autofill to automatically add suggestions to the address input. Address Autofill works with browser HTML autocomplete tags, which your website may already have.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Autofill suggestions</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.0.0-beta.24/web.js"></script>
</head>
<body>
<form class="prose flex flex--column">
    <h3>Shipping</h3>
    <input class="input mb12" name="address" autocomplete="shipping address-line1" placeholder="Address">
    <input class="input mb12" name="apartment" autocomplete="shipping address-line2" placeholder="Apartment">
    <div class="flex">
        <input class="input mb12" name="city" autocomplete="shipping address-level2" placeholder="City">
        <input class="input mb12 ml6" name="state" autocomplete="shipping address-level1" placeholder="State">
        <input class="input mb12 ml6" autocomplete="shipping postal-code" placeholder="ZIP / Postcode">
    </div>

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

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
window.addEventListener('load', () => {

    const collection = mapboxsearch.autofill({
        accessToken: ACCESS_TOKEN
    });
});
</script>

</body>
</html>
Additional Developer Resources
Was this example helpful?