javascript - 使用 ENTER 提交表单与单击提交按钮时的不同行为

Question

我有一个 HTML 表单输入元素，它使用 SearchBox来自 Google Maps Places API 的自动完成功能。在我的 JavaScript 中，我创建了一个 SearchBox 实例，如下所示:

var input = $('#spotsearch')[0];  // Refers to a form input with type="text" in my HTML
searchBox = new google.maps.places.SearchBox(input);

稍后在我的 JavaScript 中，我有以下内容:

$('#searchform').submit(function () {
    var places = searchBox.getPlaces();
    if (places) {
        var spotLat = searchBox.getPlaces()[0].geometry.location.lat();
        var spotLng = searchBox.getPlaces()[0].geometry.location.lng();
        $('#latitude').val(spotLat);
        $('#longitude').val(spotLng);
    }

});

这是我的问题:选择完成候选后，当我通过单击表单的提交按钮提交表单时，一切都按预期进行，并且 places 将引用具有单个对象的数组。但是，如果我通过按 ENTER 提交表单，匿名函数仍然会被调用，但地方返回一个空数组。在这两种情况下，发送的请求似乎完全相同。我在这里缺少什么？

我是 JavaScript 和 Goggle Maps API 的新手，所以我不确定我的错误源自何处。我的直觉是，这可能与某种时间安排有关，但这实际上只是一种模糊的预感。任何建议，将不胜感激。谢谢!

编辑:

为了提供更多细节，这是我的整个脚本:

var searchBox;
var places;
function initSearchBox() {
    var KCLatLng = new google.maps.LatLng({lat: 39.093201, lng: -94.573419});
    var bounds = new google.maps.LatLngBounds(KCLatLng);

    var input = $('#spotsearch')[0];
    searchBox = new google.maps.places.SearchBox(input);
    searchBox.setBounds(bounds);

    $('#searchform').submit(function () {
        var places = searchBox.getPlaces();
        if (places) {
            var spotLat = searchBox.getPlaces()[0].geometry.location.lat();
            var spotLng = searchBox.getPlaces()[0].geometry.location.lng();
            $('#latitude').val(spotLat);
            $('#longitude').val(spotLng);
        }

    });
}

当我加载 Goggle Maps API 时，

initSearchBox 将作为 callback 参数传递。

我也尝试过这样做:

var searchBox;
var places;
function initSearchBox() {
    var KCLatLng = new google.maps.LatLng({lat: 39.093201, lng: -94.573419});
    var bounds = new google.maps.LatLngBounds(KCLatLng);

    var input = $('#spotsearch')[0];
    searchBox = new google.maps.places.SearchBox(input);
    searchBox.setBounds(bounds);
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places) {
            var spotLat = searchBox.getPlaces()[0].geometry.location.lat();
            var spotLng = searchBox.getPlaces()[0].geometry.location.lng();
            $('#latitude').val(spotLat);
            $('#longitude').val(spotLng);
        }
    });
}

但这给了我相同的结果(点击 ENTER 不会设置 #latitude 或 #longitude 的值，但单击提交按钮执行)。

这是我的表单的 HTML(使用 Django 模板和 Bootstrap):

<form method="get" id="searchform" action="{% url 'spot_search' %}"
      class="navbar-form navbar-left plain" role="search">
    <div class="form-group">
        <input id="spotsearch" type="text" class="form-control plain"
               placeholder="Search spots" name="search_query">
    </div>

    <button type="submit" class="btn btn-default plain">
        <span class="glyphicon glyphicon-search"></span> Search
    </button>
    <input id="latitude" name="latitude" type="hidden">
    <input id="longitude" name="longitude" type="hidden">
</form>

Answer 1

这是否被提交到服务器？如果是这样，这可能是一个竞争条件。表单在提交到服务器之前不会等待隐藏字段设置。无论您是在表单提交事件中还是在 SearchBox 的 places_changed 事件中设置值，您仍然需要阻止 Enter 键将表单提交到服务器，或者阻止表单通过用户操作提交，以便您可以在设置数据后以编程方式提交。

要禁用回车键提交表单，请查看此处: Google Autocomplete - enter to select

要禁用表单提交，请按照 Juan 建议并包含 e.preventDefault();