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

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

我也遇到过这个问题，想出了一个好的解决方案。在我的网站中，我想在提交之前将 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();
        }
    });
});

这个解决方案似乎效果很好。

Answer 3

对于用户按下“回车”时引发问题的一般问题，上述两个回答都是很好的答案。但是 - 我在使用 Google Places Autocomplete 时遇到了一个更具体的问题，这可能是 OP 问题的一部分。为了让 place_changed 事件做任何有用的事情，用户需要选择一个自动完成选项。如果您只是触发 'place_changed'，则会跳过 if () 块并且不设置 cookie。

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

注意：如果您在同一页面上有多个自动完成输入，则会使用 amirnissim 的答案，而不是选择的答案。

Answer 4

也许不是最用户友好的解决方案，但您可以使用 JQuery 禁用输入键。

这样的……

$('.search-location').keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});