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

Question

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

<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 的现有输入或刚刚添加的输入。

感谢您对此的任何帮助。

Answer 1

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

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

//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();
  });