仅在输入 3 个键后如何在 google-maps 自动完成上显示选项？答案

【问题标题】：How to display options on google-maps autocomplete only after entering 3 keys?仅在输入 3 个键后如何在 google-maps 自动完成上显示选项？
【发布时间】：2017-08-17 10:08:03
【问题描述】：

我在我的 react 应用程序中使用 google-maps，并希望创建一个位置搜索，该搜索仅在输入至少 3 个键时才会显示选项。即使我们输入 1 个键，谷歌地图自动完成功能也会开始显示选项。如何限制这种行为？

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);

【问题讨论】：

标签： javascript google-maps reactjs google-maps-api-3

【解决方案1】：

如果您使用的是 Google 的自动完成 JS 库，我认为您无法编辑其实现的设置。

相反，我建议调用 Google Places Autocomplete API（使用 AJAX） - 并且仅在客户端输入 3 个键后调用它：

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

这还允许为您的表单添加其他功能。您可以在表单中添加去抖动功能。这可以防止您的应用程序由于每次击键后都发送请求而敲击端点。相反，您可以在他们停止输入以发送请求后等待大约 300 毫秒：

Perform debounce in React.js

【讨论】：