Autocomplete 如何为Google places触发place_changed事件按Enter键自动完成

单击似乎会触发事件并设置cookies，但按enter键提交不会设置cookies，相反，页面会在没有cookies的情况下重定向

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位置是多个文本框上的一个类。

---

有一个submit按钮，它从Cookie和重定向（服务器端）获取值。

可能不是最方便用户的解决方案，但您可以使用JQuery禁用enter键

像这样的

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

---

改编自Jonathan Caulfield的回答：

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

---

以上两个回答都很好地回答了当用户按下“回车”键时发出问题的一般问题。然而，我在使用Google Places Autocomplete时遇到了一个更具体的问题，这可能是OP问题的一部分。要让place_changed事件执行任何有用的操作，用户需要选择一个自动完成选项。如果您只是触发“place_changed”，则会跳过If（）块，并且不会设置cookie

问题的第二部分有一个很好的答案：

---

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

我也遇到了这个问题，并提出了一个很好的解决方案。在我的网站中，我想在提交之前将autocomplete.getPlace（）格式化的_地址保存在一个隐藏的输入中。当单击表单的提交按钮时，这与预期一样有效，但在自动完成的下拉菜单中按选择项上的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();
        }
    });
});

---

此解决方案似乎运行良好。

我尝试了该代码，但认为按下键时自动完成功能会获得焦点，而不是文本框。没有回答问题，并建议改为做一些非常糟糕的UX。这不是Google Mapa API问题。它在Google Maps API v3 Places Library中。问题是关于在DOM元素上触发事件，而不是关于Google Maps API。回答不错。我能够很容易地调整它来做我想做的事情，那就是启动自动完成侦听器，然后继续提交表单。这已经有一段时间没有得到回答了，所以谷歌的自动完成小部件中可能发生了一些变化，但如果我使用这段代码，

getPlace（）
自动完成
对象上的

方法将返回null。标准的

place\u changed

处理程序似乎在按键时触发，因此（对我来说）从这里返回false就足以阻止提交包含表单。注释“在搜索结果上按enter键时，此事件似乎触发两次。第一次getPlace（）未定义”保存了我。在采取行动之前，我所做的只是检查回调中的

是否未定义，现在一切正常。感谢您在更大的背景下分享您的想法和解决方案