Javascript US Autocomplete Tutorial
Try autocomplete! https://www.smarty.com/products/us-ad...
Documentation: https://www.smarty.com/docs/plugins/a...
Getting your web form to have an address autocomplete capability isn't as hard as it may seem. All you need is access to the HTML for the page and a Smarty account with address autocomplete lookups in it.
Here's my page with a simple web form. Full disclosure, I'm not a super coder, so I just took a screenshot of another form and put that into my chosen AI tool, and it spat out this page. I have a separate CSS sheet that’s styling it, and it's READY for autocomplete.
In other tabs, I have the Smarty address plugin documentation open, and my Smarty account dashboard ready to access.
The first step is to make sure that the input fields have ID's that match the selectors in the JavaScript. In the documentation, there's a super simple sample form that lists the field ID's of street, secondary, city, state, and zipcode. My form code on my page only says "zip" so I'll adjust that to match "zipcode".
Now that those ID's exactly match the JavaScript selectors, I can simply copy and paste that JavaScript code into the head of my HTML page.
This code has a line that references "your-smarty-embedded-key". This is where you'll need your Smarty account.
In my account dashboard, I'll want to double-check that I do have an active US Address Autocomplete license with lookups in it. I've got a couple that I can use, so next I need to get that embedded key.
I can select "API keys" on either the left or right side, depending on the window size, or click "Generate your API keys" in the "Quick actions" section. From here, I'll select "Create Embedded Key".
I'll name this key "DEMO" and make sure to list the host as the domain that my form is on. In this case, it's a bunch of numbers. Once I click "create key", this is ready to go. I'll just copy the key and paste it into the embeddedKey line in the HTML and save it.
Now, if I give my page a lil' refresh, the autocomplete tool is going to start working like a champ! Note that the secondary field remains blank unless I select an address that has a secondary unit.
Simple enough? If you're ever in doubt while setting up your own autocomplete form, you can always reach out to Smarty support by clicking on the chat icon in the corner of any Smarty.com page.
On this page of the site you can watch the video online Javascript US Autocomplete Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Smarty 21 April 2026, share the link with friends and acquaintances, this video has already been watched 121 times on youtube and it was liked by 0 viewers. Enjoy your viewing!
