016 - Autocomplete Species w/ Algolia

Date: June 29th 2020

One of my side projects currently involves building a large registration system that includes linking plants that people own with the species. Both are stored in seperate databases and linked using IDs and graphQL. My current challenge is to make the registration form for the plants that has an autocomplete search function for the species. Currently I'm trying to use Algolia and its React-InstantSearch to create this effect, and while I can get it to search and display the results of my database, i"m currently stuck trying to link this data into my Formik form.

So after some more experimenting, I've been suggested to try react-select. Hopefully this will be a bit cleaner and get what I want.

Select Species...

Success! I now have a searchable bar which will update a Formik form 😎 The trick to this was to the create an Async Select using React-Select and then populate the options using a callback to the algolia index using algoliasearch.js. During the callback function, I could shape the hits to match react-select as well as add additional information such as the image. Then back in the AsyncSelect I could make a custom options that showed the image alongside the selections. Perfect!