使用多个Google自动完成功能时得到“未定义”

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循环，以便程序可以读取具有此类的所有项目，然后为每个项目实施autocomplete +获取有关特定位置的数据。自动完成工作。但是，当我尝试获取数据时，第一项出现“未定义”。

<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();
...