Google 自动完成 API - 修改并提交搜索

Question

我们有一个文本框输入连接到 Google 的自动完成 API。

澳大利亚的许多郊区每个州都有重复的名称，例如巴尔莫勒尔新南威尔士州。特别是有一个总是 returns 我们的用户的“错误”结果，如果他们从下拉列表中 select 它，因为 Google 不显示邮政编码或完全合格的信息。我们计划通过 place_changed 事件检测输入的值，并显示两个按钮，他们可以单击这些按钮来消除他们的 selection 与将直接匹配每个位置的字符串的歧义。这部分正在运行。

但是我不知道如何将其作为新搜索自动提交。

如果我将每一行粘贴到控制台中，什么是有效的：

var addressTextBox = $("input[id$='addressTextBox']");
google.maps.event.trigger(addressTextBox.get(0), 'focus', {});
addressTextBox.get(0).dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Enter', 'keyCode': 13 }));

我已经连接了另一个事件来接受回车键并自动在它之前加上一个指向 select 的向下箭头并提交列表中的第一项，如另一个问题中所回答的那样。

但是，如果在代码中串在一起，它就不起作用。下拉菜单出现但对点击没有反应，或者输入键在任何更新之前经过并搜索。每行之间必须有一个延迟。我假设这是 Google API 延迟，因此不能硬编码，但我看不到执行回调或根据完成触发下一步的方法。

有没有更简单的直接提交搜索的方法？

我们也许可以通过调整我们的页面来解决这个问题好像搜索发生了，但是通过实际的机制来做到这一点将允许我们只依赖定期更新逻辑。

Answer 1

我建议不要使用小部件并改用 autocomplete service。

这将需要连接您自己的输入文本框和下拉菜单，但您似乎更喜欢这样。

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
const predictions = await autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
});

或者，您可以从用户点击您的按钮转到上面的代码。理想情况下，您也可以重复使用会话令牌。

Google 自动完成 API - 修改并提交搜索

Google Autocomplete API - modify and submit search

jquery

google-maps