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的情况下做到这一点，那对我来说会很好或者更直接或更有教育意义，因为我认为我的部分解决方案至少接近/可能是正确的一些调整？

将Google地方自动填充功能添加到列表项中新生成的输入

0 个答案: