将 google 地方自动完成添加到列表项中新生成的输入

Question

var start = new google.maps.places.Autocomplete(
    (document.getElementById('start')), {
      types: ['geocode']
    });

<input id="start" placeholder="Where to begin?" type="text" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

我可以让 Google 地点自动完成功能在文本字段中工作。

我想要一个按钮来将这些字段生成为 li，并在每个字段中包含自动完成功能。这是一个没有自动完成功能的示例：

document.getElementById('addplace').addEventListener('click', function() {
    addplace();
  });

var j=1;
function addplace() {
  var node = document.createElement("li"); 
  node.innerHTML = "<input id='place" + j +"' placeholder='Pit stop " + j + "' onFocus='geolocate()' type='text' />";               
  document.getElementById("waypoints").appendChild(node);
  j++; 
}

<input type="submit" id="addplace" value="Add One!">
<ul id="waypoints"></ul>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

所以生成的输入的 id 是 place1、place2 等。

我尝试添加

var place"+j+" = new google.maps.places.Autocomplete(
(document.getElementById('place"+j+"')), {
  types: ['geocode']
});

进入 addplace 函数的定义，但它似乎导致我所有的 javascript 都被禁用（地图根本不再显示）。不知道为什么；我不认为谷歌会阻止它。也许我犯了语法错误或地方“+j+”不是命名变量的正确方法？

感谢您帮助自动为每个生成的输入字段添加地点自动完成功能。

更新：我注意到这个问题Google Places Autocomplete doesn't work on dynamically generated input elements 并将研究它以尝试在这里应用，但我注意到在该示例中使用 ajax 和其他可能比我需要的更复杂的东西。即他们在答案中引用http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js。如果我可以在没有 jquery 的情况下做到这一点，那对我来说会更好或更直接或更具有教育意义，因为我认为我的部分解决方案至少是接近的/通过一些调整可能是正确的？

Answer 1

我猜这就是你要找的东西：

1). 添加带有特定id 的按钮。然后使用任何元素 （此处为 ul 和 id = "waypoints"） 来包装所有自动完成输入。

2). 然后将click event 添加到生成带有动态id's 的自动完成输入的按钮。

3). 现在为元素 （此处为 ul） 中的所有那些（如果有）创建的输入创建一个点击事件，其中包含 id （此处为id = "waypoints"） 并创建实例，同时针对单击的自动完成输入。

片段：

var totalAC = 0; 
$(document).on('click', "#waypoints input[type=text]",function () {
	var currentInp = $(this).attr("id");
	var placeBox = new google.maps.places.Autocomplete(document.getElementById(currentInp));
});

$("#newAutocomplete").click(function(){
	totalAC = $("#waypoints input").length;
	totalAC = totalAC + 1;
	var codeVar = "<li><input id='place" + totalAC + "' placeholder='Where to begin?' type='text' /></li>";
	$("#waypoints").append(codeVar);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

<button id="newAutocomplete">Add One+</button>
<ul id="waypoints">

</ul>