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

Question

我在我的 React 应用程序中使用谷歌地图，并想创建一个位置搜索，它仅在输入至少 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);

Answer 1

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

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

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

这还允许为您的表单添加额外的功能。您可以在表单中添加去抖动。这可以防止您的应用程序因每次击键后发送请求而破坏端点。相反，您可以在他们停止输入以发送请求后等待 ~300 毫秒左右:

Perform debounce in React.js