如果没有重点关注，Google自动完成输入将无法正常工作

Question

我有一个网页，我想在其中指导用户使用Google Maps Autocomplete API输入地址。

我有3个字段。 第一个仅限于建议地点。配置如下：

<input name="locality" type="text" class="form-control" id="locality" placeholder="Insert locality" required>

然后使用javascript：

var input = document.getElementById('locality');
var autocomplete = new google.maps.places.Autocomplete(input, {
    types : [ '(cities)' ]
});

autocomplete.setComponentRestrictions({'country': ['us']});

// Set the data fields to return when the user selects a place.
autocomplete.setFields(['address_components', 'geometry', 'icon', 'name']);

autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  if (!place.geometry) {
    // User entered the name of a Place that was not suggested and
    // pressed the Enter key, or the Place Details request failed.
    window.alert("Scegli tra i suggerimenti di Google o spostati nel campo successivo (Comune) per continuare con l'inserimento dei dati.");
    return;
  }

  if (place.address_components) {
    $("#locality").data('addresscomponents', place.address_components);

    var locality = "";
    if (getAddressPart(place.address_components, "locality") != undefined) {
        locality = getAddressPart(place.address_components, "locality").long_name
        if (getAddressPart(place.address_components, "locality").long_name != getAddressPart(place.address_components, "administrative_area_level_3").long_name) {
            locality += ", " + getAddressPart(place.address_components, "administrative_area_level_3").long_name
        }
    } else {
        locality = getAddressPart(place.address_components, "administrative_area_level_3").long_name
    }

    var region = getAddressPart(place.address_components, "administrative_area_level_2").short_name;
    $("#locality").val(locality || "")

    $("#inputAddressForGoogle").val($("#inputAddressForGoogle").val() + ", " + locality + ", " + region);
    $("#inputAddressForGoogle").data("locality", locality);
    $("#inputAddressForGoogle").data("region", region);

    $("#inputRegion").val(getAddressPart(place.address_components, "administrative_area_level_2").long_name)
  }
});

var getAddressPart = (addressComponents, type) => {
    return addressComponents.find(el => {
        return el.types.indexOf(type) >= 0
    })
}

上面使用的三个中的第二个#inputRegion字段仅用于获取并向用户显示所选位置的区域：

<input name="inputRegion" type="text" class="form-control" id="inputReagion" placeholder="Region" required>

上面的javascript代码中也使用了第三个输入，实际上从不集中注意力

<input name="inputAddress" type="text" class="form-control" id="inputAddress" placeholder="" required
    style="z-index: 99;background: transparent;">
<input name="inputAddressForGoogle" type="text" class="form-control" id="inputAddressForGoogle" placeholder="" required
    style="color: #aaa;position: absolute;margin-top: -34px;z-index: -98;border: none;box-shadow: none;">

用户将在其中输入一个输入，而在其下将使用以下值查询Google的自动完成服务：用户插入的地址+地理位置+区域。

JavaScript：

var input = document.getElementById('inputAddressForGoogle');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setFields(['address_components', 'geometry', 'icon', 'name']);
autocomplete.setTypes(['address']);

autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();    
  if (place.address_components) {
    $("#inputAddress").data('addresscomponents', place.address_components);

    var street = getAddressPart(place.address_components, "route") ? getAddressPart(place.address_components, "route").short_name : ''
    var streetNumber = getAddressPart(place.address_components, "street_number") ?
        ", " + getAddressPart(place.address_components, "street_number").short_name : ''

    $("#inputAddress").val(street + streetNumber)
  }
});

现在，当用户将焦点放在第三输入上时，我希望他们能够移动并选择与下方输入字段相关的自动完成建议。

Answer 1

将所有密钥传播到基础字段就足够了。

$("#inputAddress").on('keyup', (e) => {
    google.maps.event.trigger( document.getElementById("inputAddressForGoogle"), 'focus', {} );
    try {
        google.maps.event.trigger(document.getElementById("inputAddressForGoogle"), 'keydown', {keyCode: e.keyCode});
    } catch (e) {
    }
});