谷歌添加自动完成的地方在列表项新生成的输入 [英] Add google places autocomplete to newly generated inputs in list items

问题描述

\r

\r

VAR开始=新google.maps.places.Autocomplete（\r
    （的document.getElementById（'开始'））{\r
      类型：['地理code']\r
    }）;

\r

＆LT;输入ID =开始占位符=从哪里开始？键入=TEXT/＆GT;\r
\r
＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://maps.google.com/maps/api/js?libraries=places＆GT;＆LT; / SCRIPT＆GT;

\r

\r

\r

我可以得到谷歌的地方自动完成文本字段工作。

我想一个按钮来生成这些领域里的，包括自动完成中每个字段。下面是一个例子，而不自动完成工作：

\r

\r

的document.getElementById（'addplace'）。的addEventListener（'点击'，功能（ ）{\r
    addplace（）;\r
  }）;\r
\r
变种J = 1;\r
功能addplace（）{\r
  VAR节点=使用document.createElement（礼）;\r
  node.innerHTML =＆LT;输入ID ='的地方+ J +'占位=进站+ J +'的onfocus =大地定位（）类型='文字'/＆gt;中;\r
  的document.getElementById（航点）的appendChild（节点）。\r
  J ++;\r
}

\r

＆LT;输入类型=提交ID =addplaceVALUE =添加一个＆GT！;\r
＆LT; UL ID =航点＆GT;＆LT; / UL＆GT;\r
＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://maps.google.com/maps/api/js?libraries=places＆GT;＆LT; / SCRIPT＆GT;

\r

\r

\r

于是产生输入的ID是PLACE1，place2等。

我尝试添加

  VAR的地方+ J +=新google.maps.places.Autocomplete（
（的document.getElementById（'的地方+ J +'））{
  类型：['地理code']
}）;
 

到addplace函数的定义，但它似乎导致我所有的javascript禁用（地图不再露面的话）。不知道为什么;我无法想象谷歌会阻止它。也许我做一个语法错误或地方+ J +是不是来命名变量的正确方法？

感谢您的帮助自动添加自动完成的地方给每个生成的输入字段。

更新：我注意到了这个问题，<一个href=\"http://stackoverflow.com/questions/21553673/google-places-autocomplete-doesnt-work-on-dynamically-generated-input-elements\">Google商家信息自动填充不起作用动态生成输入元素
并会研究它，试图在这里申请，但我注意到使用Ajax和其他的东西，可能是更复杂，比我需要在该例子。即它们引用 http://ajax.googleapis.com/ AJAX /库/ jQuery的/ 1.10.2 / jquery.min.js 的答案。如果我能做到这一点没有jQuery的将是很好或者更直白或教育对我来说，因为我认为我的部分解决方案是至少接近/可能是一些调整是否正确？

解决方案

我想这就是你要找的内容：

1）。与特定的添加按钮 ID 。然后使用任何元素的（这里 UL 与 ID =航点）的包装全部您自动完成输入。

2）。，然后添加单击事件来按钮，生成动态自动完成输入的ID 。

3）。立即为所有这些click事件（如果有的话）创建的元素中输入的（这里 UL ） 的有 ID 的（这里 ID =航点）和与同一时间就点击autcomplete输入创建实例 autcomplete的。

段：

\r

\r

VAR totalAC = 0;\r
$（文件）。在（咔哒，#waypoints输入[类型=文]，函数（）{\r
VAR currentInp = $（本）.attr（ID）;\r
VAR placeBox =新google.maps.places.Autocomplete（的document.getElementById（currentInp））;\r
}）;\r
\r
$（＃newAutocomplete）。点击（函数（）{\r
totalAC = $（＃航点输入）的长度。\r
totalAC = totalAC + 1;\r
变量codeVAR =＆LT;立GT;＆LT;输入ID ='的地方+ totalAC +'占位符='从哪里开始？键入='文字'/＆GT;＆LT; /李＆gt;中;\r
$（＃航点）追加（codeVAR）。\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.9.1/jquery.min.js\"></script>\r
＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://maps.google.com/maps/api/js?libraries=places＆GT;＆LT; / SCRIPT＆GT;\r
\r
＆LT;按钮ID =newAutocomplete＆gt;添加一个+ LT; /按钮＆GT;\r
＆LT; UL ID =航点＆GT;\r
\r
＆LT; / UL＆GT;

\r

\r

\r

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>

I can get Google places autocomplete working in a text field.

I want a button to generate these fields as li's and include autocomplete for in each field. Here is an example without the autocomplete working:

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>

So the id's of inputs generated are place1, place2, etc.

I tried adding

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

into the definition of addplace function but it seemed to cause all my javascript to be disabled (the map no longer showed up at all). Not sure why; I don't imagine Google would be blocking it. Maybe I'm making a syntax error or place"+j+" is not a correct way to name a variable?

Thanks for your help automatically adding places autocomplete to each generated input field.

UPDATE: I noticed this question Google Places Autocomplete doesn't work on dynamically generated input elements and will study it to try and apply here but i notice use of ajax and other things that might be more complicated than i need in that example. i.e. they reference http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js in an answer. if i could do this without jquery that would be nice or maybe more straightforward or educational for me, since i figure my partial solution is at least close / could be correct with some tweaks?

解决方案

I guess this is what you looking for:

1). Add button with specific id. Then use any element (here ul with id = "waypoints") to wrap all your Autocomplete inputs.

2). Then add click event to button which generates the Autocomplete Inputs with dynamic id's.

3). Now create a click event for all those(if any) created inputs inside the element (here ul) having id (here id = "waypoints") and create instance of autcomplete with respect to clicked Autcomplete Input at same time.

Snippet:

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>

这篇关于谷歌添加自动完成的地方在列表项新生成的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！