CODEWITHSUNDEEP
javascriptgoogle-mapsreactjsgoogle-maps-api-3
Naveen Attri
Naveen Attri

Reputation: 85

How to display options on google-maps autocomplete only after entering 3 keys?

I am using google-maps in my react app and want to create a location search which will display options only when atleast 3 keys are entered. Google maps autocomplete starts showing options even when we enter 1 key. How can I restrict this behaviour?

const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(40.6700, -73.9400)
});
const autocomplete = new this.state.google.maps.places.Autocomplete(locationFilter);

Upvotes: 1

Views: 860

Answers (1)

HarveyD
HarveyD

Reputation: 60

If you're using Google's Autocomplete JS library, I don't believe you can edit the settings of their implementation.

Instead I would suggest calling the Google Places Autocomplete API (using AJAX) - and only calling it after 3 keys have been entered client side:

https://developers.google.com/places/web-service/autocomplete

This also allows for additional functionality to your form. You can add a debounce to your form. This prevents your app from hammering the endpoint due to a request being sent after every keystroke. Instead you could wait ~300ms or so after they have stopped typing to send the request:

Perform debounce in React.js

Upvotes: 1

Related Questions