javascript - Google 自动完成 Places API 错误 InvalidValueError

Question

function wnw_set_google_autocomplete_my(){
    jQuery(gaaf_fields_my).each(function(){

        var autocomplete_my= new google.maps.places.Autocomplete(
        /** @type {HTMLInputElement} */(this),
        { types: ['geocode'] });
        // When the user selects an address from the dropdown,
        // populate the address fields in the form.

    });
}
jQuery(window).load(function(){
    wnw_set_google_autocomplete_my();
});

链接:http://35.154.204.251/contact/

我已经在 WordPress 中安装了 Google 自动完成 Place api，但我在控制台中收到 InvalidValueError 错误，但我无法找出问题所在，因为对我来说一切都很好。

Answer 1

看看变量 gaaf_fields_my 的值。当我设置断点时，我可以看到该变量具有以下值

" [name="input_2"], [name="demo"], #input_2_2, #demo, .address, .demo"

问题是jQuery(gaaf_fields_my)返回 <li> 作为第一个元素具有“地址”类且不是 <input> 的元素。这会导致自动完成构造函数中出现异常，该构造函数需要输入元素作为参数，但您尝试在 <li> 上初始化它.

在调用自动​​完成构造函数之前，您应该应用更好的选择器或在 jQuery 循环内部检查元素的标签名称:

 function wnw_set_google_autocomplete_my(){
     jQuery(gaaf_fields_my).each(function(){

         if (this.tagName.toLowerCase() === 'input') {

             var autocomplete_my= new google.maps.places.Autocomplete(
                 /** @type {HTMLInputElement} */(this),
                 { types: ['geocode'] });

         }
     });
 }