javascript - Google Places Autocomplete place_changed 事件在表单提交后按回车键触发

Question

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

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

我正在针对以下基本场景进行测试，每个场景都应导致提交表单。如果用户选择了自动完成项，locMatch 应该为真。

1. 输入自由格式文本，按回车键:
   • place_changed 被解雇
   • onSubmit 被触发。 locMatch:假
2. 输入文本，使用向下箭头选择一个位置，然后按回车键:
   • onSubmit 被触发。 locMatch:假
   • place_changed 被解雇(为时已晚!)
3. 输入文字，用鼠标选择一个地方，点击提交:
   • place_changed 触发(点击地点后)
   • onSubmit 被触发。 locMatch: true (点击按钮后)
4. 输入文本，用鼠标选择一个地方，将文本更改为自由格式字符串，按回车键:
   • place_changed 触发(点击地点后)
   • place_changed 触发(在输入新文本并按回车键后)
   • onSubmit 被触发。 locMatch:假
5. 输入文字，用鼠标选择一个地方，将文字改为任意格式的字符串，点击提交:
   • place_changed 触发(点击地点后)
   • onSubmit 被触发。 locMatch:true(输入新文本并单击按钮后)
6. 输入文本，使用鼠标选择一个地方，输入新文本，使用向下箭头选择一个地方，然后按回车键
   • place_changed 触发(点击地点后)
   • onSubmit 被触发。 locMatch:true(输入新文本并单击按钮后)
   • place_changed 被解雇

只有情况 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对我来说效果很好。