谷歌商家信息自动填充不起作用动态生成的输入元素 [英] Google Places Autocomplete doesn't work on dynamically generated input elements
本文介绍了谷歌商家信息自动填充不起作用动态生成的输入元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
自动完成完美的作品在多个静态输入字段。但是，当我通过按钮自动完成添加输入字段没有这些输入字段。也许问题是在封闭的，但我是因为我弱的Javascript不能确定。谁能帮我？
这里是code：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;测试与LT; /标题＆GT;
＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无＆GT;
＆LT;间的charset =UTF-8＆GT;＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本src=\"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places\"></script>
＆LT;脚本＆GT;
VAR地图= NULL;
变种标记= [];
无功自动完成= [];
无功输入= [];
变种类型= [];
VAR autocompleteOptions = {
componentRestrictions：{国家：AZ}
};
此功能动态创建多达5个输入字段（我把这个函数初始化方法，它diidn't工作之一）：
$（文件）。就绪（函数（）{
变种数= 2;
$（＃addInputField）。点击（函数（）{
算上++;
$（＃inputlar）追加（＆LT;输入ID ='PAC-输入+数+'类='controlsInput类型=文本占位符='请输入您的目的地/＆GT;＆LT; BR / ＆gt;中）;
变种newInput = [];
VAR墩=的document.getElementById（'PAC-输入+计数）;
newInput [计数1] =墩;
setupAutocomplete（自动完成，newInput，计数-1）;
如果（计数=== 7）{
$（＃addInputField），删除（）。
}
}）;
}）;
这个功能是从对多个输入maintaininng自动完成初始化方法调用。完美的作品：
函数setupAutocomplete（自动完成，输入，I）{ 自动完成[I] =新google.maps.places.Autocomplete（输入[I]，autocompleteOptions）;
自动完成[I] .bindTo（'界限'，地图）; google.maps.event.addListener（自动完成[我]，'place_changed'，函数（）{
VAR信息窗口=新google.maps.InfoWindow（）;
如果（标记[1] - 放大器;＆安培;标记[I] .setMap）{
标记[I] .setMap（NULL）;
标记[I] = NULL;
}
标志由[i] =新google.maps.Marker（{
地图：地图
}）;
infowindow.close（）;
标记[I] .setVisible（假）;
VAR地方=自动完成[I] .getPlace（）;
如果（！place.geometry）{
返回;
} //如果这个地方有一个几何体，然后present它在地图上。
如果（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）;
}其他{
map.setCenter（place.geometry.location）;
map.setZoom（17）; //为什么17？因为它看起来很不错。
} 标记[I] .setPosition（place.geometry.location）;
标记[I] .setVisible（真）; VAR地址='';
如果（place.address_components）{
地址= [
（place.address_components [0]＆放大器;＆放大器; place.address_components [0] .short_name ||''），
（place.address_components [1]＆放大器;＆放大器; place.address_components [1] .short_name ||''），
（place.address_components [2]＆放大器;＆放大器; place.address_components [2] .short_name ||''）
]。加入（''）;
} infowindow.setContent（'＆LT; DIV＆GT;＆LT;强＆GT;'+ place.name +'＆LT; / STRONG＆GT;＆LT; BR＆GT;'+地址）;
infowindow.open（地图，标记[I]）;
}）;
}
和finaly初始化方法：
函数初始化（）{
VAR的MapOptions = {
中心：新google.maps.LatLng（40.4700，50.0000）
变焦：10，
zoomControl，用于：真实，
ZoomControlOptions来：{
风格：google.maps.ZoomControlStyle.SMALL
}，
MapTypeControl中：真实，
mapTypeControlOptions中：{
风格：google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
地图=新google.maps.Map（的document.getElementById（'地图画布'），
的MapOptions）;
类型=的document.getElementById（'类型选择'）;
map.controls [google.maps.ControlPosition.TOP_LEFT] .push（种）;
输入= document.getElementsByClassName（controlsInput）;
对于（VAR I = 0; I＆LT; inputs.length;我++）{
setupAutocomplete（自动完成，输入，I）;
}
//设置单选按钮的监听器来改变地方的过滤器类型
//自动完成。
功能setupClickListener（ID，类型）{
VAR单选按钮=的document.getElementById（id）的;
google.maps.event.addDomListener（单选按钮，'点击'，功能（）{
对于（VAR I = 0; I＆LT; autocomplete.length;我++）{
自动完成[I] .setTypes（种）;
}
}）;
} setupClickListener（'的changetype-所有'，[]）;
setupClickListener（'的changetype设立'，['建立']）;
setupClickListener（'的changetype-地理code'，['地理code']）;
} google.maps.event.addDomListener（窗口'负荷'，初始化）;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
和HTML：
＆LT;身体GT;
＆LT;表＆gt;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT; DIV＆GT;
＆LT; DIV ID =inputlar＆GT;
＆LT;输入ID =PAC-输入级=controlsInput类型=文本占位符=Marşrutunuzuharadanbaşlayırsınız/＆GT; ＆LT; BR /＆GT;
＆LT;输入ID =PAC-输入2级=controlsInput类型=文本占位符=Haraya gedirsiniz＆GT; ＆LT; BR /＆GT;
＆LT; / DIV＆GT; ＆LT; BR /＆GT;
＆LT;输入ID =addInputField类型=按钮值=Yolüstüdayanacaqəlavə等类=风格的按钮-10/＆GT; ＆LT; DIV =隐藏隐藏ID =类型选择器级=控制＆GT;
＆LT;输入类型=电台NAME =输入ID =的changetype所有检查=选中＆GT;
＆LT;标签=的changetype所有＆GT;所有＆LT; /标签＆gt; ＆LT;输入类型=电台NAME =输入ID =的changetype设立＆GT;
＆LT;标签=的changetype设立＆GT;场所＆LT; /标签＆gt; ＆LT;输入类型=电台NAME =输入ID =的changetype-地理code＆GT;
＆LT;标签=的changetype-地理code＆GT;地理codeS＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; DIV ID =地图画布的风格=WIDTH：540px;高度：380px;＆GT;＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
问题是，你不叫 setupAutocomplete（）添加了新的元素之后。你必须做这样的事情（可能使用jQuery改善）：
$（文件）。就绪（函数（）{
变种数= 2;
$（＃addInputField）。点击（函数（）{
算上++;
的console.log（添加新的输入字段'）;
$（＃inputlar）追加（＆LT;输入ID ='PAC-输入+数+'类='controlsInput类型=文本占位符='请输入您的目的地/＆GT;＆LT; BR / ＆gt;中）; // 添加
变种newInput = [];
VAR墩=的document.getElementById（'PAC-输入+计数）;
newInput.push（墩）;
setupAutocomplete（自动完成，newInput，0）; 如果（计数=== 7）{
$（＃addInputField），删除（）。
}
}）;
}）;
更新：在jsbin 例子。 setupAutocomplete（）要改变一点点，评论code离开那里看到区别， IDX 代替参数 I 。
函数setupAutocomplete（自动完成，输入，I）{ //自动完成[I] =新google.maps.places.Autocomplete（输入[I]，autocompleteOptions）;
autocomplete.push（新google.maps.places.Autocomplete（输入[I]中，autocompleteOptions））;
VAR IDX = autocomplete.length - 1;
//autocomplete[i].bindTo('bounds'，地图）;
自动完成[IDX] .bindTo（'界限'，地图）; //google.maps.event.addListener(autocomplete[i]，'place_changed'，函数（）{
google.maps.event.addListener（自动完成[IDX]，'place_changed'，函数（）{
...
注意：我没有检查，当你达到7自动完成输入，会发生什么。也许你将不得不做一些更新。
autocomplete works perfectly on multiple static input fields. But when i add an input field by button autocomplete doesn't work on these input fields. Maybe the problem is in closure, but I'm not sure because of my weak Javascript. Can anyone help me?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var map = null;
var marker = [];
var autocomplete = [];
var inputs = [];
var types = [];
var autocompleteOptions = {
componentRestrictions: {country: "az"}
};
This function dynamically creates up to 5 input fields(I put this function in initialize method and it diidn't work either):
$(document).ready(function(){
var count = 2;
$("#addInputField").click(function(){
count++;
$("#inputlar").append("<input id='pac-input" + count + "' class='controlsInput' type='text' placeholder='Enter your destination' /> <br />");
var newInput = [];
var newEl = document.getElementById('pac-input' + count);
newInput[count-1] = newEl;
setupAutocomplete(autocomplete, newInput, count-1);
if (count === 7) {
$("#addInputField").remove();
}
});
});
This function is called from initialize method for maintaininng autocomplete on multiple inputs. Works perfectly:
function setupAutocomplete(autocomplete,inputs,i) {
autocomplete[i] = new google.maps.places.Autocomplete(inputs[i], autocompleteOptions);
autocomplete[i].bindTo('bounds', map);
google.maps.event.addListener(autocomplete[i], 'place_changed', function() {
var infowindow = new google.maps.InfoWindow();
if (marker[i] && marker[i].setMap) {
marker[i].setMap(null);
marker[i] = null;
}
marker[i] = new google.maps.Marker({
map: map
});
infowindow.close();
marker[i].setVisible(false);
var place = autocomplete[i].getPlace();
if (!place.geometry) {
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker[i].setPosition(place.geometry.location);
marker[i].setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker[i]);
});
}
And finaly initialize method:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.4700, 50.0000),
zoom: 10,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
inputs = document.getElementsByClassName("controlsInput");
for(var i = 0; i < inputs.length; i++) {
setupAutocomplete(autocomplete,inputs,i);
}
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
for (var i=0 ; i<autocomplete.length; i++) {
autocomplete[i].setTypes(types);
}
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
And the HTML:
<body>
<table>
<tr>
<td>
<div>
<div id="inputlar">
<input id="pac-input" class="controlsInput" type="text" placeholder="Marşrutunuzu haradan başlayırsınız" /> <br />
<input id="pac-input2" class="controlsInput" type="text" placeholder="Haraya gedirsiniz"> <br />
</div> <br />
<input id="addInputField" type="button" value="Yolüstü dayanacaq əlavə et" class="styled-button-10"/>
<div hidden="hidden" id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
</div>
</td>
<td>
<div id="map-canvas" style="width:540px;height:380px;"></div>
</td>
</tr>
</table>
</body>
</html>
解决方案
Problem is that you don't call setupAutocomplete() after new elements are added. You have to do something like this (could be improved using jQuery):
$(document).ready(function(){
var count = 2;
$("#addInputField").click(function(){
count++;
console.log('add new input field');
$("#inputlar").append("<input id='pac-input" + count + "' class='controlsInput' type='text' placeholder='Enter your destination' /> <br />");
// added
var newInput = [];
var newEl = document.getElementById('pac-input' + count);
newInput.push(newEl);
setupAutocomplete(autocomplete, newInput, 0);
if (count === 7) {
$("#addInputField").remove();
}
});
});
Update: example at jsbin. setupAutocomplete() has to be changed a little, commented code left there to see difference, idx used instead of parameter i.
function setupAutocomplete(autocomplete, inputs, i) {
// autocomplete[i] = new google.maps.places.Autocomplete(inputs[i], autocompleteOptions);
autocomplete.push(new google.maps.places.Autocomplete(inputs[i], autocompleteOptions));
var idx = autocomplete.length - 1;
//autocomplete[i].bindTo('bounds', map);
autocomplete[idx].bindTo('bounds', map);
//google.maps.event.addListener(autocomplete[i], 'place_changed', function() {
google.maps.event.addListener(autocomplete[idx], 'place_changed', function() {
...
Note: I didn't check what will happen when you reach 7 autocomplete inputs. Maybe you will have to do some update.
这篇关于谷歌商家信息自动填充不起作用动态生成的输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
