使用带有动态文本框的 Google 地方信息自动完成功能

Using Google Places Autocomplete with dynamic textbox

本文关键字：信息 功能 成功 方信息 动态 文本 Google      更新时间：2023-09-26

我正在按照本教程实现Google Places自动完成功能。但是，这仅适用于现有的静态定义文本字段。在我的测试应用程序中，我动态添加了文本字段，用户单击按钮即可添加更多文本字段。

<input maxlength="40" name="Point[location][]" id="Point_location" type="text" placeholder="Enter a location" autocomplete="off">
<input maxlength="40" name="Point[location][]" id="Point_location2" type="text" placeholder="Enter a location" autocomplete="off">

这是我的JavaScript

<script>
    var location = $("input[id^=Point_location]")[0];
    var autocompleteLocation = new google.maps.places.Autocomplete(location, options);
    google.maps.event.addListener(autocompleteLocation, 'place_changed', function () {
        var placeLocation = autocompleteLocation.getPlace();
    });
</script>

我似乎无法让自动完成功能使用id Point_location或刚刚添加的输入来处理任何现有输入。

感谢对此的任何帮助。

当您也发布了创建克隆的代码时，会更容易回答。

我猜你只是在克隆输入，这是行不通的。 您必须为每个输入创建一个新的自动完成实例：

//create the clone
  var clone=$(location).clone(false).val('').appendTo('body');
//apply Autocomplete
  var ac = new google.maps.places.Autocomplete(clone[0]);
//apply listener
  google.maps.event.addListener(ac, 'place_changed', function () {
    var placeLocation = this.getPlace();
  });
相关文章：