Question

我已将Google Maps Javascript API V3中的google.maps.places.Autocomplete添加到基本搜索表单中。我试图找到一种可靠的方法来检测用户是否从自动完成列表中选择了一个项目（使用鼠标或键盘），或者是否提交了自由格式文本。

代码：http://jsfiddle.net/2rhL3cyk/1/

我正在测试以下基本方案，每个方案都应该导致表单提交。如果用户选择了自动填充项，则locMatch应该为真。

输入自由格式文本，点击回车：
- place_changed fired
- onSubmit已解雇。 locMatch：false
输入文字，使用向下箭头选择地点，然后按Enter键：
- onSubmit已解雇。 locMatch：false
- place_changed被解雇（太晚了！）
输入文字，用鼠标选择地点，点击提交：
- place_changed已解雇（点击后）
- onSubmit已解雇。 locMatch：true（点击按钮后）
输入文字，用鼠标选择一个地方，将文字改为自由形态字符串，点击回车：
- place_changed已解雇（点击后）
- 开始播放place_changed（输入新文字并点击输入后）
- onSubmit已解雇。 locMatch：false
输入文字，使用鼠标选择地点，将文字更改为自由格式字符串，点击提交：
- place_changed已解雇（点击后）
- onSubmit已解雇。 locMatch：true（输入新文本并单击按钮后）
输入文字，使用鼠标选择地点，输入新文字，使用向下箭头选择地点，然后按Enter键
- place_changed已解雇（点击后）
- onSubmit已解雇。 locMatch：true（输入新文本并单击按钮后）
- place_changed fired

只有案例1,3和4按预期工作。

在＃2中，onSubmit在place_changed之前被触发，因此在提交表单之前它没有机会设置locMatch。手动触发place_changed没有帮助，因为即使输入字段具有正确的文本，autocomplete.getPlace（）仍然是未定义的，直到表单提交触发为止。我能够强制它与一个可怕的setTimeout hack一起工作：

$('#loc_search').submit(function (e) {
  setTimeout(function () {
    console.log('submit for real! locMatch:', locMatch);
    $(this).submit();
  }, 150);
});

我真的想找到一种更合理的解决方法。我想超时值可能取决于用户的机器规格，而且我不想要任何不必要的延迟。

在＃5中，它在点击进入后根本没有调用place_changed。同样，我尝试在提交处理程序中手动触发place_changed事件，但这没有任何效果，因为getPlace（）返回先前选择的值，即使用户在输入字段中键入了它。解决这个问题的一种方法是在更改时重置locMatches，但这会打破下面的＃6。

$('#location').change(function() {
  locMatch = false;
});

在＃6中，locMatch从前一次点击仍然是真的，因此它确实给出了预期的结果，但它在技术上并不正确，因为在表单提交后仍然会触发place_changed。针对＃5的上述修复打破了这种情况，但上面的setTimeout方法再次修复了它。

我整天都在拔头发，任何建议都会非常感激。谢谢！

Answer 1

这里有完全相同的问题。自动填充库不提供除place_changed之外的任何其他事件。也没有状态属性，例如request_pending。

来自mmalone的“hack”：Google Autocomplete - enter to select 为我工作很棒。

按Enter键，表单提交后，Google商家信息自动填充place_changed事件将触发

1 个答案: