Address Autocomplete with Algolia Places

The process of completing online forms sucks. So, why not help your users get through them faster and more accurately. With Algolia, you can implement address autocomplete with minimal effort. Check out how you can do this in our tutorial below.

Image for post
Image for post
Algolia Address Autocomplete

Signing Up for Algolia

Sign up for Algolia here: https://community.algolia.com/places. Their pricing is very generous with up to 100,000 requests for free.

After signing up for an account, click on API Keys in the left menu and find your Application Id and Search-Only API Key. We’ll be using them later in our javascript file we’re about to create.

Image for post
Image for post
Algolia Dashboard
Image for post
Image for post
Algolia App Id and API Key

Creating the Address Form

For this example, I’ll just be creating 2 files. An index.html file that will display our form and an index.js file that will hold our javascript code. I’ll also be importing the Algolia Places and Bootstrap CSS framework CDN.

Inside of the index.html, we’ll add 4 textboxes for street address, city, state, and zip code.

Wiring Up the Javascript

Inside of our index.js file, we’ll put the code we’ll need to work with the Algolia Places API

That’s it! Now you have an extremely easy way to implement address autocompletion in your web apps.

Video Tutorial

Video Tutorial

GihubRepo: https://github.com/TheDiligentDev/AlgoliaAddressAutocomplete

Written by

Full-stack developer developer for 7+ years with a passion for learning new things and sharing. For more, check out diligentdev.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store