Autofill suggestions (custom elements) | Mapbox Search JS

This example uses <mapbox-address-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 (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.0.0-beta.17/web.js"></script>
</head>
<body>
<form class="prose flex flex--column">
<h3>Shipping</h3>
<mapbox-address-autofill>
<input class="input mb12" name="address" autocomplete="shipping address-line1" placeholder="Address">
</mapbox-address-autofill>
 
<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>
<mapbox-address-autofill>
<input class="input mb12" name="address" autocomplete="billing address-line1" placeholder="Address">
</mapbox-address-autofill>
 
<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 EXAMPLE WORK YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
 
const script = document.getElementById('search-js');
script.onload = () => {
const elements = document.querySelectorAll('mapbox-address-autofill');
for (const autofill of elements) {
autofill.accessToken = ACCESS_TOKEN;
}
};
</script>
</body>
</html>