如何触发Google的place_changed事件在Enter键上自动完成

Question

点击似乎触发事件并设置cookie但按Enter键提交不会设置cookie,而是页面重定向而没有cookie.

function locationAuto() {
        $('.search-location').focus(function () {
        autocomplete = new google.maps.places.Autocomplete(this);
        searchbox = this;

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var thisplace = autocomplete.getPlace();
            if (thisplace.geometry.location != null) {
                $.cookie.raw = true;
                $.cookie('location', searchbox.value, { expires: 1 });
                $.cookie('geo', thisplace.geometry.location, { expires: 1 });
            }
        });
});

.search-location是多个文本框上的一个类.有一个提交按钮,可以从cookie和重定向中获取值(服务器端)

Answer 1

改编自Jonathan Caulfield的回答:

$('.search-location').keypress(function(e) {
  if (e.which == 13) {
    google.maps.event.trigger(autocomplete, 'place_changed');
    return false;
  }
});

Answer 2

当用户按下"输入"时,上述两个响应都是解决问题的一般问题的良好答案.但是 - 在使用Google商家信息自动填充功能时,我遇到了一个更具体的问题,这可能是OP问题的一部分.要使place_changed事件执行任何有用的操作,用户需要选择一个自动完成选项.如果您只是触发'place_changed',则跳过if()块并且不设置cookie.

这里问题的第二部分有一个非常好的答案:https: //stackoverflow.com/a/11703018/1314762

注意:如果您在同一页面上有多个自动完成输入,amirnissim的答案,而不是所选答案,是您要使用的答案.

Answer 3

我也遇到过这个问题,并提出了一个很好的解决方案.在我的网站中,我想在提交之前将autocomplete.getPlace().formatted_address保存在隐藏的输入中.单击表单的提交按钮时,这可以正常工作,但在自动填充的下拉菜单中按下选项上的Enter键时则不行.我的解决方案如下:

$(document).ready(function() {

    // Empty the value on page load
    $("#formattedAddress").val("");
    // variable to indicate whether or not enter has been pressed on the input
    var enterPressedInForm = false;

    var input = document.getElementById("inputName");
    var options = {
      componentRestrictions: {country: 'uk'}
    };
    autocomplete = new google.maps.places.Autocomplete(input, options);

    $("#formName").submit(function(e) {
        // Only submit the form if information has been stored in our hidden input
        return $("#formattedAddress").val().length > 0;
    });

    $("#inputName").bind("keypress", function(e) {
        if(e.keyCode == 13) {
            // Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.

            // We change this variable to indicate that enter has been pressed in our input field
            enterPressedInForm = true;
        }
    });

    // This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        // If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
        if(autocomplete.getPlace() !== undefined) {
            $("#formattedAddress").val(autocomplete.getPlace().formatted_address);
        }
        // If enter has been pressed, submit the form.
        if(enterPressedInForm) {
            $("#formName").submit();
        }
    });
});

这个解决方案似乎运作良好.