Я пытаюсь реализовать панель автозаполнения поиска input
для автоматического заполнения результатов поиска колледжей и университетов в моем приложении React
.
мой код соответствует следующему:
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
и, очевидно, тег <script>
в индексе. html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
Согласно документам gmaps , чтобы получать только выборочные результаты из этих типы : school
, university
, secondary-school
и college
Мне нужно изменить его. Но я явно не получил документы правильно и не мог понять это хорошо.
, поэтому я хотел знать, как правильно отформатировать URL? => React-Places-Autocomplete docs