javascript - 将谷歌位置自动完成功能添加到列表项中新生成的输入中

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被禁用( map 根本不再显示)。不知道为什么；我不认为谷歌会阻止它。也许我犯了语法错误，或者“+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)。然后将点击事件添加到按钮，该按钮生成具有动态id的自动完成输入。

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>