Autofill events | Mapbox Search JS

This example uses MapboxAddressAutofill.event:retrieve to populate a MapboxAddressMinimap. The minimap will expand to fill its container.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Autofill events</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">
<mapbox-address-autofill>
<input name="address" autocomplete="shipping address-line1" placeholder="Address">
</mapbox-address-autofill>
</form>
<div style="width: 300px; height: 200px;">
<mapbox-address-minimap></mapbox-address-minimap>
</div>
<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 autofill = document.querySelector('mapbox-address-autofill');
const minimap = document.querySelector('mapbox-address-minimap');
 
autofill.accessToken = ACCESS_TOKEN;
minimap.accessToken = ACCESS_TOKEN;
 
autofill.addEventListener('retrieve', (event) => {
const featureCollection = event.detail;
if (!featureCollection || !featureCollection.features.length) {
minimap.feature = null;
return;
}
 
const feature = featureCollection.features[0];
minimap.feature = feature;
});
};
</script>
</body>
</html>