使用多个谷歌自动填充功能时获得"Undefined"

Question

我有多个表单在同一页面上使用Google自动完成功能。关于页面如何工作的一些上下文：用户基本上可以添加他们想要的步骤数(要添加步骤，表单使用 Google 自动完成(，并且在每个步骤中他们可以添加活动(要添加活动，表单也使用 Google 自动完成(。

我知道通过为每个表单分配不同的 id，然后通过 Id 获取元素以应用自动完成并获取数据，会起作用，但问题是每次用户创建步骤时，它都会创建一个步骤 ID，然后活动表单将分配给特定的步骤 ID， 这使得它具有挑战性，因为最终我最终可能会拥有许多不同的 ID。

这就是为什么我通过类而不是id尝试不同的方法。因此，假设我有这两种形式。它们同时具有"search_term"类：

<input type="text" class="form-control search_term" placeholder="Search...">
<input type="text" class="form-control search_term" placeholder="Search...">

然后我基本上实现了一个for循环，以便程序可以读取具有此类的所有项目，然后为每个项目实现自动完成+获取有关特定位置的数据。自动完成功能有效。但是，在尝试获取数据时，我对第一项感到"未定义"。

<script>
function activatePlacesSearch(){
var input = document.getElementsByClassName('search_term');
var i;
for (i = 0; i < input.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(input[i])
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var result = autocomplete.getPlace();
console.log(result)
if (result != null) {
const location = result['name']
const name = result['name']
const address = result['formatted_address']
const phone_number = result['international_phone_number']
const icon = result['icon']
const types = result['types']
const user_ratings_total = result['user_ratings_total']
const rating = result['rating']
const url = result['website']
const latitude = autocomplete.getPlace().geometry.location.lat();
const longitude = autocomplete.getPlace().geometry.location.lng();
const photos = result['photos'][0].getUrl();
};
});
};
};
</script>

我有点纠结于如何解决这个问题。非常感谢您的帮助。

Answer 1

这只是一个疯狂的猜测，但我很确定通过覆盖变量autocomplete破坏功能，也许尝试为每个自动完成使用动态变量名称：

window['autocomplete_'+i] = new google.maps.places.Autocomplete(input[i])
...
var result = window['autocomplete_'+i].getPlace();
...