谷歌自动完成无法处理具有相同类名的多个元素

Google autocomplete not working on multiple elements with same class name

本文关键字:同类 元素 处理 谷歌      更新时间:2024-02-11

我试图在多个类元素上使用Google Autocomplete,但它似乎不起作用。当我引用一个id时,它会起作用,如图所示,但不是用我的小提琴。这是我迄今为止的代码:

$(document).ready(function () {
    addressLookup();
});
function addressLookup() {
    var address = document.getElementsByClassName('form-control booking address');
    var options = {
        componentRestrictions: {
            country: 'uk'
        }
    };
    new google.maps.places.Autocomplete(address, options);
}

您需要遍历具有上述类的元素集合并创建。

 var address = document.getElementsByClassName('form-control booking address');
 for(var i=0; i< address.length; i++){
    new google.maps.places.Autocomplete(address[i], options);
 }

Fiddle

问题出现在函数getElementsByClassName的结果中。对于"自动完成",您需要一个元素,而不是数组。

function addressLookup() {
    var address = document.getElementById('pickup');
    var address2 = document.getElementById('destination');
    var options = {
        componentRestrictions: {
            country: 'uk'
        }
    };
    new google.maps.places.Autocomplete(address, options);
    new google.maps.places.Autocomplete(address2, options);
}