表单提交后,谷歌商家信息自动填充place_changed事件触发时pressing进入 [英] Google Places Autocomplete place_changed event fires after form submission when pressing enter

查看:313
本文介绍了表单提交后,谷歌商家信息自动填充place_changed事件触发时pressing进入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I've added google.maps.places.Autocomplete from the Google Maps Javascript API V3 to a basic search form. I am trying to find a reliable way to detect whether the user has chosen an item from the autocomplete list (either with mouse or keyboard) or is submitting free-form text.

code: http://jsfiddle.net/2rhL3cyk/1/

我正在测试针对以下基本方案,每个应导致表单提交。 locMatch 如果用户选择自动完成的项目应该是真实的。

I am testing against the following basic scenarios, each of which should result in a form submission. locMatch should be true if the user selected an autocomplete item.


  1. 输入格式的文本,按下回车键:

    • place_changed燃

    • 的onsubmit解雇。 locMatch:假


  • 的onsubmit解雇。 locMatch:假

  • place_changed解雇(太迟了!)


  • place_changed解雇(点击发生之后)

  • 的onsubmit解雇。 locMatch:真(点击按钮后)


  • place_changed解雇(点击发生之后)

  • place_changed解雇(输入新的文本,并按下回车键后)

  • 的onsubmit解雇。 locMatch:假


  • place_changed解雇(点击发生之后)

  • 的onsubmit解雇。 locMatch:真(输入新的文字,然后点击按钮后)


  • place_changed解雇(点击发生之后)

  • 的onsubmit解雇。 locMatch:真(输入新的文字,然后点击按钮后)

  • place_changed燃

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

Only cases 1, 3, and 4 work as expected.

在#2的onsubmit是越来越之前触发place_changed,所以它不会有机会来设置locMatch的形式将已经提交后才可。它不利于触发手动place_changed,因为即使输入字段具有正确的文本,autocomplete.getPlace()仍然不确定,直到后提交表单的火灾。我能够迫使它与一个可怕的setTimeout工作黑客就像这样:

In #2, onSubmit is getting fired before place_changed, so it doesn't have a chance to set locMatch until after the form would have been submitted. It doesn't help to trigger place_changed manually, because even though the input field has the correct text, autocomplete.getPlace() remains undefined until after the form submit fires. I was able to force it to work with a horrible setTimeout hack like so:

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

我真的想找到一个更明智的方式来解决这个问题。我想象中的超时值可能依赖于用户的机器规格,我不希望任何不必要的延误。

I would really like to find a more sensible way to fix this. I imagine the timeout value might depend on a user's machine specs, and I don't want any unnecessary delay.

在#5,它并不要求所有按下回车键后place_changed。同样,我试图手动触发在提交处理程序place_changed事件,但没有任何效果,因为getPlace()返回previously选择的值,即使用户键入了它在输入字段中。解决这个的一种方式是通过复位上变化locMatches,但这跌破#6

In #5, it doesn't call place_changed at all after hitting enter. Again, I tried manually triggering a place_changed event in the submit handler, but this has no effect because getPlace() returns the previously selected value, even though the user has typed over it in the input field. One way to solve this is by resetting locMatches on change, but this breaks #6 below.

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

在#6,locMatch仍然是从previous点击真的,所以它确实给了预期的结果,但由于place_changed仍在表单提交后被解雇它不是技术上是正确的。为#5断裂这种情况下,上述修正,但上述的setTimeout方法再次修复它。

In #6, locMatch is still true from the previous click, so it does give the expected result, but it is not technically correct because place_changed is still being fired after the form submission. The above fix for #5 breaks this case, however the setTimeout method above fixes it again.

我已经整天在外拉我的头发在这个任何建议将不胜AP preciated。谢谢!

I've been pulling my hair out over this all day, any advice would be greatly appreciated. Thank you!

推荐答案

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

Having the exact same problem here. The Autocomplete library doesn't provide any other event than place_changed. There is also no status property e.g. request_pending.

有一个从这里mmalone黑客:谷歌自动完成 - 输入选择
工作对我来说太棒了。

There is a "hack" from mmalone here: Google Autocomplete - enter to select Worked great for me.

这篇关于表单提交后,谷歌商家信息自动填充place_changed事件触发时pressing进入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆