Google商家信息自動填充功能不適用於動態生成的輸入元素
[英]Google Places Autocomplete doesn't work on dynamically generated input elements
問題描述
自動完成功能在多個靜態輸入字段上完美運行。 但是當我通過按鈕添加輸入字段時，自動完成功能對這些輸入字段不起作用。 也許問題是關閉，但我不確定，因為我的弱Javascript。 誰能幫我？
這是代碼：
<!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"}
};
這個函數動態創建最多5個輸入字段（我把這個函數放在初始化方法中，它也不起作用）：
$(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();
}
});
}）;
從初始化方法調用此函數，以便在多個輸入上維護自動完成。 完美的工作：
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]);
});
}
並最終初始化方法：
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>
和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>
2 個解決方案
解決方案1
6 已采納 2014-02-04 13:48:25
問題是在添加新元素后不要調用setupAutocomplete() 。 你必須做這樣的事情（可以使用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();
}
});
});
更新： jsbin上的示例 。 setupAutocomplete()必須改變一點，注釋代碼留在那里看看差異， idx用來代替參數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() {
...
注意：我沒有檢查當您達到7個自動完成輸入時會發生什么。 也許你將不得不做一些更新。
解決方案2
3 2015-05-30 03:37:51
我已經開發了腳本，可以為開始位置，結束位置以及路標提供Google地方搜索輸入，如果您嘗試一次，它就很漂亮了。 這是代碼。 下載並在任何瀏覽器中運行並享受..！
Javascript onclick不適用於動態生成的rails元素嗎？
[英]Javascript onclick doesn't work with dynamically generated rails elements?
輸入字段更改的前一個標記不會在Google地方信息自動填充中消失
[英]The previous marker of changed input field doesn't disappear in Google Places Autocomplete
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.