谷歌自动完成输入不工作,如果不在焦点

我有一个网页,我想在其中指导用户使用谷歌地图自动完成API输入地址。

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

<input name=“locality”type=“text”class=“form control”id=“locality”placeholder=“insert locality”必需>
然后从javascript:

var input=document.getElementByID('locality');
var autocomplete=new google.maps.places.autocomplete(输入,){
类型:'(城市)']
(});

autocomplete.setcomponentRestrictions('country':['us']);

//设置用户选择位置时返回的数据字段。
autocomplete.setfields(['address_components'、'geometry'、'icon'、'name']);

autocomplete.addListener('place_changed',function()。{
var place=autocomplete.getplace();
如果(!)位置.几何){
//用户输入了未建议的位置的名称,并且
//按了Enter键,或者Place Details请求失败。
window.alert(“scegli tra i suggerimenti di google o spostati nel campo successivo(comune)per continuere con l'inserimento dei dati.”);
返回;
}

if(place.address_组件){
$(“位置”).data('address components',place.address_components);

var位置=“;
if(getAddressPart(place.address_组件,“位置”)!{未定义的){
locality=getAddressPart(place.address_组件,“locality”).long名称
if(getAddressPart(place.address_组件,“位置”).long名称!=getAddressPart(place.address_components,“管理\u区域\u级别\u 3”).long名称){
locality+=“,+getaddresspart(place.address_components,“管理\区域\级别\ 3”).long名称
}
}否则{
locality=getAddressPart(place.address_components,“管理\u区域\u级别\u 3”).long名称
}

var region=getaddresspart(place.address_components,“administrative_area_level_2”).short_name;
$(“位置”).val(位置”“)

$(“inputaddressforgoogle”).val($(“inputaddressforgoogle”).val()+“,+locality+”,“+region);
$(“inputaddressforgoogle”).data(“locality”,locality);
$(“inputaddressforgoogle”).data(“region”,region);

$(inputRegion”).val(getAddressPart(place.address_components,“管理_区域_级别_2”).long_名称)
}
(});

var getAddressPart=(地址组件,类型)=>。{
返回地址组件。查找(el=>){
返回el.types.indexof(type)>=0
})
}
< /代码> 

上面使用的三个字段的第二个inputRegion->code>字段仅用于获取并向用户显示所选位置的区域:


<input name=“inputRegion”type=“text”class=“form control”id=“inputreagion”placeholder=“region”必选>
< /代码> 

上面的javascript代码中也使用了第三个输入,实际上从未聚焦过

<input name=“inputaddress”type=“text”class=“form control”id=“inputaddress”placeholder=“”必选
style=“z-index:99;background:transparent;”>
<input name=“inputaddressforgoogle”type=“text”class=“form control”id=“inputaddressforgoogle”placeholder=“”必需
style=“color:aaa;position:absolute;margin-top:-34px;z-index:-98;border:none;box shadow:none;”>
< /代码> 

在用户要键入的地方有一个输入,在输入下面有一个输入,用于查询Google的自动完成服务,其值为:user inserted address+locality+region.


javascript:。

var input=document.getElementByID('inputaddressforgoogle');
var autocomplete=new google.maps.places.autocomplete(输入);
autocomplete.setfields(['address_components'、'geometry'、'icon'、'name']);
autocomplete.settypes(['地址']);

autocomplete.addListener('place_changed',function()。{
var place=autocomplete.getplace();
if(place.address_组件){
$(“inputaddress”).data(“地址组件”,place.address_组件);

var street=getaddresspart(place.address_components,“route”)?getAddressPart(place.address_组件,“路由”).short名称:“”
var street number=getaddresspart(place.address_components,“street_number”)?
“,”+GetAddressPart(place.address_components,“街道号”).short_name:“”

$(“输入地址”).val(街道+街道号)
}
(});


现在,当用户聚焦第三个输入时,我希望他们能够移动并选择与下面的输入字段相关的自动完成建议。

<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;">


有一个输入是用户要输入的,下面的一个输入是用值来查询谷歌的自动完成服务:用户插入地址+位置+区域。

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)
  }
});




现在,当用户关注第三个输入时,我希望他们能够移动并选择与下面的输入字段相关的自动完成建议。