diff --git a/README.md b/README.md index e2c6d413..f50776f5 100644 --- a/README.md +++ b/README.md @@ -200,6 +200,30 @@ Default: `null` You can pass a function that gets called instead of `onChange` function when user hits the Enter key or clicks on an autocomplete item. +#### options +Type: `object` +Required: `false` +Default: `{}` + +You can fine-tune the settings passed to the AutocompleteService class with `options` prop. +This prop accepts an object following the same format as [google.maps.places.AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/reference#AutocompletionRequest) +(except for `input`, which comes from the value of the input field). + +```js +// these options will bias the autocomplete predictions toward Sydney, Australia with a radius of 2000 meters, +// and limit the results to addresses only +const options = { + location: new google.maps.LatLng(-34, 151), + radius: 2000, + types: ['address'] +} + + +``` ### `geocodeByAddress` API diff --git a/src/PlacesAutocomplete.js b/src/PlacesAutocomplete.js index d9225685..9b2d2195 100644 --- a/src/PlacesAutocomplete.js +++ b/src/PlacesAutocomplete.js @@ -153,7 +153,7 @@ class PlacesAutocomplete extends React.Component { this.clearAutocomplete() return; } - this.autocompleteService.getPlacePredictions({ input: event.target.value }, this.autocompleteCallback) + this.autocompleteService.getPlacePredictions({ ...this.props.options, input: event.target.value }, this.autocompleteCallback) } autocompleteItemStyle(active) { @@ -247,6 +247,20 @@ PlacesAutocomplete.propTypes = { autocompleteContainer: React.PropTypes.object, autocompleteItem: React.PropTypes.object, autocompleteItemActive: React.PropTypes.object + }), + options: React.PropTypes.shape({ + bounds: React.PropTypes.object, + componentRestrictions: React.PropTypes.object, + location: React.PropTypes.object, + offset: React.PropTypes.oneOfType([ + React.PropTypes.number, + React.PropTypes.string + ]), + radius: React.PropTypes.oneOfType([ + React.PropTypes.number, + React.PropTypes.string + ]), + types: React.PropTypes.array }) }; @@ -255,7 +269,8 @@ PlacesAutocomplete.defaultProps = { hideLabel: false, classNames: {}, autocompleteItem: ({ suggestion }) => (
{suggestion}
), - styles: {} + styles: {}, + options: {} } export default PlacesAutocomplete diff --git a/src/tests/index.spec.js b/src/tests/index.spec.js index 427b727d..973dfe59 100644 --- a/src/tests/index.spec.js +++ b/src/tests/index.spec.js @@ -180,7 +180,17 @@ describe('custom inline styles', () => { const item = wrapper.find("#PlacesAutocomplete__autocomplete-container").childAt(0) expect(item.props().style.color).to.equal('blue') }) +}) +describe('AutocompletionRequest options', () => { + it('calls getPlacePredictions with the correct options', () => { + global.google.maps.places.AutocompleteService.prototype.getPlacePredictions = (request, callback) => {} + const spy = sinon.spy(global.google.maps.places.AutocompleteService.prototype, 'getPlacePredictions') + const options = { radius: 2000, types: ['address'] } + const wrapper = mount( {}} options={options} value='test'/>) + wrapper.find('.input-element').simulate('change', { target: { value: 'test' } }) + expect(spy.calledWith({ ...options, input: 'test' })).to.be.true + }) }) // TODO: test geocodeByAddress function