Add Address Autofill to your website | Mapbox Search JS

In this tutorial, you will learn how to add Mapbox Address Autofill to your website, an element provided by the Mapbox Search JS library. Address Autofill helps developers simplify the tedious multi-field address form into a single autocomplete search box, allowing their customers to find their address with a few keystrokes.

This tutorial is geared towards e-commerce websites and other simple applications. This tutorial shows configuration for automatic input autofill.

For complex single-page applications (SPAs) or React, consider using Mapbox Search JS React or wrapping the HTML Custom Element for Address Autofill.

Search JS React

Integrate rich UI components in React, built on top of Mapbox Search JS. This is the recommended entry-point for large-scale applications.

chevron-right

example

Autofill suggestions (custom elements)

Use HTML Custom Elements to add autofill suggestions with Address Autofill in this interactive demo.

chevron-right

Getting started

A Mapbox access token. Your Mapbox access tokens are on your Account page.
Ability to change your site. Like other frameworks (for example, analytics), you should have a way to add "tags" or code snippets to your website for use at checkout.
- If you do not have direct HTML access, Google Tag Manager is suitable for this tutorial.

Set up the page structure

To get started, this tutorial will use the following HTML code to add Address Autofill.

index.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <form>
            <input name="address" placeholder="Address" type="text" />
            <input
                name="apartment"
                placeholder="Apartment number"
                type="text"
            />
            <input name="city" placeholder="City" type="text" />
            <input name="state" placeholder="State" type="text" />
            <input name="country" placeholder="Country" type="text" />
            <input name="postcode" placeholder="Postcode" type="text" />
        </form>
    </body>
</html>

Set up autocomplete tags

NOTE: If not present, it is not possible to add autocomplete tags through Google Tag Manager.

Address Autofill requires HTML autocomplete tags, a standard browser feature. Google Chrome, Mozilla Firefox, and Safari use autocomplete to autofill addresses and credit cards. You may already have autocomplete tags.

You can test this on your checkout page with the browser Console. For Console in Google Chrome, this can be opened with Command+Option+I on Mac and Control+Shift+I on Windows and Linux.

After opening the Console, Paste and then hit Enter with the following command:

document.querySelector('[autocomplete~="street-address"], [autocomplete~="address-line1"]') != null

This command will read true if autocomplete tags are present, and false otherwise.

Add autocomplete tags

If autocomplete tags are not present (see Set up autocomplete tags), you'll have to add them to each HTML input you'd like to autofill.

Here are common autocomplete tags for addresses. This is a non-exaustive list.

Autocomplete tag	Description	Example
`autocomplete="address-line1"`	The first line of an address, usually includes the street number and street.	740 15th St NW
`autocomplete="address-line2"`	The second line of an address, usually an apartment number.	Apartment 700
`autocomplete="address-level1"`	The least specific administrative level. In the United States, this is the state or territory.	District of Columbia
`autocomplete="address-level2"`	The second least specific administrative level. In the United States, this is the city.	Washington
`autocomplete="address-level3"`	In countries with more than two administrative levels.
`autocomplete="postal-code"`	The postal code of the administrative level.	20005
`autocomplete="country"`	The standardized country code.	us
`autocomplete="country-name"`	The country name. Note: These are non-standardized.	United States

Using autocomplete, you can change index.html.

 

 
<!DOCTYPE html>
 
<html>
 
    <head></head>
 
    <body>
 
        <form>
 
            <input
 
                name="address" placeholder="Address" type="text"
 
                autocomplete="address-line1"
 
            />
 
            <input
 
                name="apartment" placeholder="Apartment number" type="text"
 
                autocomplete="address-line2"
 
            />
 
            <input
 
                name="city" placeholder="City" type="text"
 
                autocomplete="address-level2"
 
            />
 
            <input
 
                name="state" placeholder="State" type="text"
 
                autocomplete="address-level1"
 
            />
 
            <input
 
                name="country" placeholder="Country" type="text"
 
                autocomplete="country"
 
            />
 
            <input
 
                name="postcode" placeholder="Postcode" type="text"
 
                autocomplete="postal-code"
 
            />
 
        </form>
 
    </body>
 
</html>

Add Mapbox Search JS

Include the following code in the <head> of your HTML file, right before the </head> tag. If using a tag manager, this is the script you'll insert and change.

index.html

 

 
<!DOCTYPE html>
 
<html>
 
    <head>
 
    <script
 
        id="search-js"
 
        defer
 
        src="https://api.mapbox.com/search-js/v1.0.0-beta.20/web.js"
 
    >
 
    </script>
 
    <script>        
 
        const script = document.getElementById('search-js');
 
        script.onload = function() {
 
            mapboxsearch.autofill({
 
                accessToken: 'your access token here'
 
            });
 
        };
 
    </script>
 
    </head>
 
    <body>
 
        <form>
 
            <input
 
                name="address" placeholder="Address" type="text"
 
                autocomplete="address-line1"
 
            />
 
            <input
 
                name="apartment" placeholder="Apartment number" type="text"
 
                autocomplete="address-line2"
 
            />
 
            <input
 
                name="city" placeholder="City" type="text"
 
                autocomplete="address-level2"
 
            />
 
            <input
 
                name="state" placeholder="State" type="text"
 
                autocomplete="address-level1"
 
            />
 
            <input
 
                name="country" placeholder="Country" type="text"
 
                autocomplete="country"
 
            />
 
            <input
 
                name="postcode" placeholder="Postcode" type="text"
 
                autocomplete="postal-code"
 
            />
 
        </form>
 
    </body>
 
</html>

Your access token is:

In the following example, we load the Mapbox Search JS <script> with a special defer keyword, making sure it doesn't load until after critical elements of your page.

After the script is loaded, we call the autofill function, which finds inputs on your page and adds Address Autofill.

Final product

You have integrated Mapbox Address Autofill into your site.

The final index.html page will look like the Autofill suggestions example, except on your site.

Next steps

Now that you have integrated Mapbox Address Autofill into your site, you can explore other, more complex examples in Examples.

Was this page helpful?

Getting started​

Set up the page structure​

Set up autocomplete tags​

Add autocomplete tags​

Add Mapbox Search JS​

Final product​

Next steps​