Location Autocomplete Form Tutorial with Algolia and React
Since it took me a long time before I figured out how to create an input field that would autocomplete a location in React, I thought sharing how I did this would be beneficial to a lot of people trying to do the same.
For this tutorial, I assume you know how to start a basic React project in your terminal. After that, I have removed most of the initially created template, so we are ready to build our own components. I have create the most simple application you could imagine to focus on the autocomplete functionality instead.
As well, I have used very basic CSS using the BEM naming convention. I have commented the code for you to understand why I used certain properties, but this most-probably is not new for most of you.
Now we are ready to implement the autocomplete function within our application. For this functionality, I am using Algolia, which is software that helps to create ‘relevant, scalable, and lightning fast Search and Discovery experiences’. On their website they have placed a tutorial, which for myself was too limited, for which I will explain the process step-by-step.
For this to work we need certain npm packages, therefore please make sure to install the following external libraries before continuing this tutorial. If you like this article and would like more tutorials like this, please consider some claps (by pressing the hands on de left), while you are fetching the libraries.
npm install react-instantsearch-dom places.jsThen create a new folder, named algolia, in your src directory to store the code from Algolia, as they mention in their tutorial (took me a long time to get to that folder name, yeah). Thereafter we are ready to create a file named connector.js in which we paste the first code snippet as shown in their tutorial. Do this once more, though now take the snippet under widget and paste this in a to-be new created file called widget.js.
After you have done this, you almost made yourself a working autocomplete field. From the third (and therewith last) code snippet take the import statement and searchClient constant and paste this in our App.js between the import of our .css file and the declaration of the App function. As we have placed the code within a folder called algolia, you will have to change the source of the Places import. Make sure this is set as displayed below.
import Places from ‘../src/algolia/widget’;The last step to have a working autocomplete field is to copy-paste the InstantSearch element (the part from last the code snippet we did not use yet) in the place of our earlier created input field. By doing this, you will see that your autocomplete is working in your favourite browser.
Problem now is that this field does not look like the one we created earlier. To get this right, go to the widget file in your algolia folder and replace the return statement of the Places class render method with the following.
We are now using our own created class again and have removed the div which was blocking the input from using the full width available.
Though, if you start typing a location, you will see two icons to delete your input, which is not working, nor looking great. To remove one of them, I would recommend to add the following selector in your .css file.
To get the actual location the user chooses, Algolia already made a function to make this really easy. In the same widget file as used earlier you will see two autocomplete.on functions, of which one is fired when the input has been changed and the other when the input field is cleared. To log the suggestion the user picks, simply place a console.log method in this function and print event.suggestion, which will print you an object with detailed information of the selected location.
Use props to pass a function from your App.js file to store the object so you could use this data within your application. For your convenience, you can find my code of this tutorial here. As well, do not hesitate to contact me on Twitter in case you have any questions left.
