(React.js) Google Places Autocomplete & Semantic UI React
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am working on a reactjs project where I am utilizing Semantic UI React. There is a component within this library called Search that has the styling and functionality that I want to utilize. Test it out and read the documentation on that component here:

https://react.semantic-ui.com/modules/search

I want to use this component for google places autocomplete. There are a few react components available that will take care of some of the google autocomplete logic, but I am unable to figure out how to use the state/data from these components and have it work with the Semantic UI Search component.

One such component that I tried to leverage is the react-places-autocomplete. You can preview a working demo of that here:

https://kenny-hibino.github.io/react-places-autocomplete/

I am not necessarily tied to the react-places-autocomplete component. If you can find one that helps deliver the functionality desired, that will be ok.

Deliverable:

The source for a single react component that will deliver autocomplete functionality but by leveraging the Semantic UI React Search component. The Semantic UI Search & Search.Results must be leveraged to retain the functionality/styling that I desire. This means in the solution component you must be including/utilizing:

import { Search } from "semantic-ui-react";

awarded to Wuddrum

Crowdsource coding tasks.

2 Solutions


Here's a component i did:

https://codesandbox.io/s/r0q7mnw3pn

Using the AutoComplete Service from google , i just do the query whenever handleResultSelect is done, after that the state changes. Check out "searchExample.js"

Since you provided a working solutions very quick, I want to award you with a tip. Wuddrum's solution had a little bit more polish to it (Selecting a search result item kept the field populated for instance). But I want to show you my gratitude with a tip.
chagwood 3 months ago
Winning solution

Here's my take on the component: Autocomplete Example

This solution provides both - a title and a description field for the autocomplete, resulting in a more pleasing and readable experience.

It doesn't use any additional NPM libraries (like react-places-autocomplete), instead, it queries the Google API through the Google Maps Javascript API.

After the result is selected it's stored in this.state.selectedPlace object. The original Google place object is also retained under source (e.g. this.state.selectedPlace.source), for any further actions.

The component is based on the standard search example from Semantic UI

Thank you for your solution. This is exactly what I was looking for!
chagwood 3 months ago
View Timeline