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

Question

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

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

我正在测试以下基本方案,每个方案都应该导致表单提交.locMatch如果用户选择了自动完成项,则应为true.

1. 输入自由格式文本,点击回车:
   • place_changed已解雇
   • onSubmit被解雇了.locMatch:false
2. 输入文字,使用向下箭头选择一个地点,然后按Enter键:
   • onSubmit被解雇了.locMatch:false
   • place_changed被解雇了(太晚了!)
3. 输入文字,用鼠标选择一个地方,点击提交:
   • place_changed已解雇(点击后)
   • onSubmit被解雇了.locMatch:true(单击按钮后)
4. 输入文字,用鼠标选择一个地方,将文字改为自由形态字符串,点击回车:
   • place_changed已解雇(点击后)
   • 触发了place_changed(输入新文本并点击后输入)
   • onSubmit被解雇了.locMatch:false
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中,在输入后它根本不会调用pl​​ace_changed.同样,我尝试在提交处理程序中手动触发place_changed事件,但这没有任何效果,因为getPlace()返回先前选择的值,即使用户在输入字段中输入了它.解决这个问题的一种方法是在更改时重置locMatches,但这会打破下面的#6.

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

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

我一整天都在拔头发,任何建议都会非常感激.谢谢!

Answer 1

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

这里有 mmalone 的“黑客”：Google Autocomplete - 输入以选择 对我来说非常有用。