我有Google地图自动填充功能处理多个input
标签,如下所示:
<input class="controls pac-input" id="pac-input" type="text" onfocus="geolocate()" placeholder="Type custom address" />
要启用Google地图自动填写功能,我需要以下代码:
//https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
$(document).ready(function () {
autocomplete = new google.maps.places.Autocomplete((document.getElementById('pac-input')), { types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function () {
MyFunc();
});
});
然后,在MyFunc()
函数中,我做我需要的东西:
function MyFunc() {
var fullAddress = autocomplete.getPlace().formatted_address;
var input = $(this);
//stuff that uses input
}
但是,此代码有两个问题:
$(this)
,但它没有工作。 jQuery如何帮助我?提前致谢!
答案 0 :(得分:8)
你真的不需要jQuery。这是一个仅使用javascript的工作示例:
HTML:
<input class="autocomplete" id="ac1" placeholder="Enter your address" type="text"></input>
<input class="autocomplete" id="ac2" placeholder="Enter your address" type="text"></input>
<input class="autocomplete" id="ac3" placeholder="Enter your address" type="text"></input>
JavaScript的:
var acInputs = document.getElementsByClassName("autocomplete");
for (var i = 0; i < acInputs.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
autocomplete.inputId = acInputs[i].id;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
console.log('You used input with id ' + this.inputId);
});
}
如果您想使用jQuery,那么您可以尝试这种方式:
$('.autocomplete').each(function() {
var autocomplete = new google.maps.places.Autocomplete($(this)[0]);
autocomplete.inputId = $(this).attr('id');
google.maps.event.addListener(autocomplete, 'place_changed', function () {
console.log('You used input with id ' + this.inputId);
});
});
希望这有帮助。
答案 1 :(得分:-1)
为了找出正在调用的输入元素,您可以将事件传递给MyFunc()
。使用$(this)
并不会检查该函数的外部以查看调用它的内容。
将addListener
更新为以下内容。
google.maps.event.addListener(autocomplete, 'place_changed', function (e) {
MyFunc(e);
});`
并将MyFunc()
更新为
function MyFunc(e) {
var fullAddress = autocomplete.getPlace().formatted_address;
var input = e;
//stuff that uses input
}
然后,您可以使用input
作为保存有关正在更新的元素的信息的变量。如果您console.log(input);
以下var input = e;
,您会看到可用于获取数据的项目列表。
您可能最感兴趣的是将var input = e;
设置为var input = e.target;
。这样您就可以轻松获得有关输入的信息。
示例:input.value
将返回相关输入的值。