1

I'm trying to implement a autocomplete search input bar for auto-completing the results of searching colleges and university in my React app.

my code is as per the following:

import React, { Component } from 'react'
import './App.css'
import PlacesAutocomplete from "react-places-autocomplete";

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }

  handleChange = address => {
    this.setState({ address });
  };

  render() {
    return (
      <div>

      <PlacesAutocomplete
      value={this.state.address}
      onChange={this.handleChange}
      onSelect={this.handleSelect}
      // searchOptions={searchOptions}
      shouldFetchSuggestions={this.state.address.length > 3}

    >
      {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
        <div >


          <input maxLength="50" className="typo"{...getInputProps({ placeholder: "Search Your College" })} />

          <div>
            {loading ? <div>...loading</div> : null}

            {suggestions.map(suggestion => {
              const style = {
                backgroundColor: suggestion.active ? "#41b6e6" : "",
              };
              return (

                <div className="suggestion"  {...getSuggestionItemProps(suggestion, { style })}>
                  {suggestion.description}
                </div>

              );
            })}
          </div>
        </div>
      )}
    </PlacesAutocomplete>
      </div>
    )
  }
}

export default App

and obviously the <script> tag in index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

According to The gmaps docs, in order to only get selective results from these types: school,university,secondary-school and college I need to modify it. But, i clearly didn't got the docs correctly and wasn't able to understand it well.

so I wanted to know whats the correct way of formatting the url? => React-Places-Autocomplete docs

Rahul Ahire
  • 685
  • 11
  • 28

1 Answers1

0

Note that what you're using is Place Autocomplete, not Place Search. The supported types for Autocomplete are listed in table 3:

geocode
address
establishment
(regions)
(cities)

So using other types like school won't work with Autocomplete; only with the Place Search service.

Hope this helps!

evan
  • 5,443
  • 2
  • 11
  • 20
  • can you suggest me how to edit this : ` ` and add restrictive parameter to it? – Rahul Ahire Apr 23 '20 at 11:19
  • The thing is, you cannot. Your script is fine as it is. The only way to add Autocomplete restrictions is by modifying the `types` parameter to any of the values listed in my answer above. E.g.: `types: ['establishment']` (see https://github.com/hibiken/react-places-autocomplete#searchoptions and https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete). – evan Apr 23 '20 at 11:41