How to Use SmartyStreets US Autocomplete API

SmartyStreets is a popular platform that provides a variety of APIs to help businesses and organizations verify and standardize addresses. One of their most popular APIs is the US Autocomplete API which can be used to quickly suggest addresses as a user types in character input.

In this tutorial, we will learn how to use the SmartyStreets US Autocomplete API to suggest addresses in your JavaScript application. We will assume that you already have an API key provided by SmartyStreets.

Step 1: Setting up the API Request Endpoint

Before we can start making API requests, we need to set up the endpoint that we want to hit for the US Autocomplete API. The API endpoint URL is as follows:

https://us-autocomplete-pro.api.smartystreets.com/suggest?

After the question mark, we need to add our API key to the endpoint URL:

https://us-autocomplete-pro.api.smartystreets.com/suggest?auth-id=<YOUR_AUTH-ID>&auth-token=<YOUR_AUTH-TOKEN>

Don't forget to replace <YOUR_AUTH-ID> and <YOUR_AUTH-TOKEN> with your SmartyStreets API key.

Step 2: Making the API Request and Handling the Response

With the endpoint setup, we can now make an API request to get suggested addresses. We'll be using the fetch method to make the request:

const fetchUSAutocomplete = () => {
    const input = document.getElementById('addressInput').value;
    fetch(`https://us-autocomplete-pro.api.smartystreets.com/suggest?auth-id=<YOUR_AUTH-ID>&auth-token=<YOUR_AUTH-TOKEN>&prefix=${input}`)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            // Handle the data response here
        })
        .catch(error => console.error(error));
};

In the above code, we are first getting the input value from an input field with an ID of addressInput. We then use the fetch method to make an API request to the US Autocomplete API endpoint, passing the prefix parameter with the input value.

The response returned by the API request is in JSON format, so we use the json method to parse the response into a JavaScript object. Finally, we log the data to the console and handle it as required.

Step 3: Formatting the Response in Your Frontend

Once the response is received, we can format it in our frontend as needed. Here is a sample function that formats the response into an HTML list and displays it on the page:

const formatResponse = data => {
    const autocompleteList = document.getElementById('autocompleteList');
    autocompleteList.innerHTML = '';

    for (let i = 0; i < data.length; i++) {
        const address = data[i];

        const li = document.createElement('li');
        li.innerText = `${address.street_line}, ${address.city}, ${address.state_abbreviation}, ${address.zipcode}`;

        autocompleteList.appendChild(li);
    }
};

In this example, we are first getting the autocompleteList element from the DOM and setting its innerHTML to an empty string. We then loop through each address in the response and create an li element for each address. Finally, we append the li element to the autocompleteList element.

Conclusion

In this blog post, we learned how to use the SmartyStreets US Autocomplete API to suggest addresses in our JavaScript application. We went through the steps of setting up the API request endpoint, making the API request, and formatting the response in our frontend. By following these steps, you can quickly implement the US Autocomplete API in your next software project.