Я использую пакет реаги-мест-автозаполнение . в настоящее время я ограничен только регионом и США.
Теперь я пытаюсь ограничиться только городом, штатом, страной и почтовым индексом.
Проблема:
- Если я использую регионы, он также показывает города, но мне нужны только город, штат, страна и почтовый индекс в поиске
- Если я использую города, он показывает город, штат и страна, но почтовый индекс не отображается в поиске.
ожидаемый результат я хочу выводить как город, штат, страну и почтовый индекс исключая местность , поселки, населенные пункты
код
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
const searchOptions = {
types: ['(regions)'],
// types: ['(cities)'],
componentRestrictions: {country: "us"}
}
handleChange = address => {
this.setState({ address });
};
handleSelect = address => {
geocodeByAddress(address)
.then(results => getLatLng(results[0]))
.then(latLng => console.log('Success', latLng))
.catch(error => console.error('Error', error));
};
render() {
const renderFunc = ({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
className="location-field"
{...getInputProps({
placeholder: 'Search Places ...',
className: 'input-box location-search-input form-control field-list',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer', margin: '0px 0px 0px 10px', width: '70%' }
: { backgroundColor: '#ffffff', cursor: 'pointer', margin: '0px 0px 0px 10px', width: '70%'};
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
);
retrun <div>
<PlacesAutocomplete
value={this.state.address}
onChange={(address)=>this.handleChange(address)}
onSelect={(e)=>this.handleSelect(e, fieldConstants.region)}
searchOptions={searchOptions}
>
{renderFunc}
</PlacesAutocomplete>
</div>
}