Add Address Autofill to an HTML form | Mapbox Search JS

This example implements Address Autofill to automatically add suggestions to the address input of an existing HTML form. Autofill is implemented using the autofill method of Mapbox Search JS Web. Address Autofill works with browser HTML autocomplete tags and form inputs must have autocomplete attributes declared for Address Autofill to work.

JavaScript


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add Address Autofill to an HTML form</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>
    <input class="input mb12 bg-white" name="address" autocomplete="shipping address-line1" placeholder="Address">
    <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>
    <input class="input mb12 bg-white" name="address" autocomplete="billing address-line1" placeholder="Address">
    <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>
<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>

このexampleは役に立ちましたか？