Developer

All tutorials

JavaScript Component: Integrate Swiftcomplete into Web Forms

intermediate

The Swiftcomplete API provides real-time address suggestions as you type, eliminating typos and mistakes and reducing the time it takes to find accurate postal addresses.

If you need help integrating our Swiftcomplete API into your website or application, contact us, and one of our product experts will help you get started.

1Get a Swiftcomplete API key

Each request must be authenticated with a Swiftcomplete API key, which you can create in your Swiftcomplete account:

GET API KEY

2Add the script to load the Swiftcomplete JavaScript file

The JavaScript Swiftcomplete integration is a code snippet that can be included on your website or in your checkout to provide address search with real-time suggestions as you type.

Firstly, copy & paste the code snippet into the <head> section of your HTML, before the closing </head> tag.

Note: Make sure you only copy the code snippet once, even if you have multiple address fields on your page.

<script>!function (e, t, c) {
    e.swiftcomplete = e.swiftcomplete || {};
    var s = t.createElement("script");
    s.async = !0, s.src = c;
    var r = t.getElementsByTagName("script")[0];
    r.parentNode.insertBefore(s, r)
		}(window, document, "https://assets.swiftcomplete.com/js/swiftlookup.js");
</script>
Copied
3Add Swiftcomplete functionality to a text field

Now copy this script and paste it directly after the previous code snippet, before the closing <head> tag.

To get the script running, replace INSERT_KEY_HERE with your Swiftcomplete API key, and replace INSERT_TEXT_FIELD_ID_HERE with the ID of an existing textbox on your page. To populate the address into your form, modify populateLineFormat to match the fields on your checkout page.

The script initialises Swiftcomplete on your existing textbox, restricts searching to Great Britain and logs the record and coordinates to the developer console when you select a result from the list of autocomplete suggestions.

<script type="text/javascript">
    /*#########################################
    Insert your API key here to run the demo:
    #########################################*/
    var SWIFTCOMPLETE_API_KEY = "INSERT_KEY_HERE";
    var SWIFTCOMPLETE_SEARCH_FIELD_ID = "INSERT_TEXT_FIELD_ID_HERE";

    function initialiseSwiftcomplete() {
        swiftcomplete.runWhenReady(function () {
            // Attach search functionality to existing field
            swiftcomplete.controls["Search field"] = new swiftcomplete.SwiftLookup({
                field: document.getElementById(SWIFTCOMPLETE_SEARCH_FIELD_ID),
                key: SWIFTCOMPLETE_API_KEY,
                searchFor: 'what3words,address',
                emptyQueryMode: 'prompt',
                promptText: 'Type your address, postcode, or what3words',
                scrollToFieldOnFocus: true,
                populateLineFormat: [
                    {
                        format: 'AddressLine1',
                        field: document.getElementById('address-line-1')
                    },
                    {
                        format: 'AddressLine2',
                        field: document.getElementById('address-line-2')
                    },
                    {
                        format: 'TertiaryLocality, SecondaryLocality, PrimaryLocality STATEABBREVIATION',
                        field: document.getElementById('address-city')
                    },
                    {
                        format: 'POSTCODE',
                        field: document.getElementById('address-postcode')
                    },
                    {
                        format: 'PrimaryCountry',
                        field: document.getElementById('address-country')
                    },
                    {
                        format: 'what3words',
                        field: document.getElementById('address-what3words')
                    }
                ]
            });

            // Restrict searching to just Great Britain (leave this out to search all available countries)
            swiftcomplete.controls["Search field"].setCountries('gb');

            // Add event listener to listen for when a result has been selected
            document.getElementById(SWIFTCOMPLETE_SEARCH_FIELD_ID).addEventListener('swiftcomplete:swiftlookup:selected', function (e) {
                // use this event listener to show your fields if hidden for example
            }, false);
        });
    }

    window.addEventListener("load", initialiseSwiftcomplete, false);
</script>
Copied
4Test your integration

Refresh your page, and try searching in your existing text field. The record and coordinates are printed to the developer console when you click a result from the list of suggestions.

5Troubleshooting

Need help, or have any questions? Get in touch with our customer support team at support@swiftcomplete.com, and we’ll help you get started with the JavaScript integration for the Swiftcomplete API.

WebsiteAdd a 3 word address input fieldUse 3 word addresses within an address searchJavaScriptSwiftComplete

Related tutorials