大家好我在俄罗斯使用谷歌地方自动填充establishments。我在处理DOM元素方面遇到了问题。
我想要实现的目标：
在HTML中，我有autocompleteString类的div，隐藏了CSS。在功能fillIn中，我通过谷歌回复HTML向其添加place.adr_address。然后，我使用该回复中的类locality来填充input类名cityRu。这部分不是很好。
问题是，我将动态添加多个accommodationDivs，并且我尝试将$('.autocompleteString').html(place.adr_address)和$('.cityRu').val(cityRu)添加到每个autocompleteString和cityRu。我尝试定位距离我的自动完成输入最近的班级$('.yourAccomm').closest('.accommodationDivs').find('.cityRu').val('mytext')和$('.yourAccomm')。
我试图达到这样的目的：
$(this)而不是place.adr_address我需要有类似JQ <span class="street-address">ул. Рубинштейна, 20</span>, <span class="locality">Санкт-Петербург</span>, <span class="country-name">Россия</span>, <span class="postal-code">191002</span>或类似于香草JS的东西，但到目前为止我尝试的所有东西都没有用。有人可以帮我这个吗？
这是function searchHotels() {
var inputs = document.querySelectorAll('.yourAccomm');
var options = {
types: ['establishment'],
componentRestrictions: {country: 'ru'}
};
var autocompletes = [];
for (var i = 0; i < inputs.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(inputs[i], options);
autocomplete.inputId = inputs[i].id;
autocomplete.addListener('place_changed', fillIn);
autocompletes.push(autocomplete);
}
function fillIn() {
var place = this.getPlace();
console.log(this)
// console.log(inputs[0])
// inputs[0].style.background = "red";
$('.autocompleteString').html(place.adr_address);
var cityRu = $('.locality').text();
console.log(cityRu)
$('.cityRu').val(cityRu);
}
}
searchHotels();
回复的示例：
<div class="accommodationDivs first_accommodation">
<div class="steps__f-grp form-group">
<label><i class="fa fa-info-circle"></i>Name of hotel / hostel (first entry)</label>
<div class="steps__f-grp__accomo input-group">
<input type="text" class="input--margin-r form-control yourAccomm" aria-label="Name of accommodation" name="first_accommodation" tabindex="11" placeholder="Enter a location">
<span class="input-group-btn">
<button id='add_field_button_1' class="steps__f-grp__btn-more btn btn-secondary" type="button">+</button>
</span>
</div>
<label for="first_accommodation" generated="true" class="error"></label>
</div>
<div class="autocompleteString">
</div>
<div class="steps__f-grp form-group">
<label for="cityRu">City</label>
<input id="cityRu" class="form-control cityRu" type="text" name="cityRu" tabindex="12">
</div>
</div>
JS：
dashedCapital = "------";
input = "a";
capital = "Warsaw";
HTML：
public static String changeDashedCapital(String dashedCapital, String input, String capital){
String[] capitalArray = capital.split("");
String[] dashedCapitalArray = dashedCapital.split("");
String[] character = input.split("");
for(int i = 0; i < capitalArray.length; i++){
//System.out.println(i);
//System.out.println(capitalArray[i] + character[0] + dashedCapitalArray[i]);
if(capitalArray[i] == character[0]){
dashedCapitalArray[i] = character[0];
}
}
String result = Arrays.toString(dashedCapitalArray);
System.out.println(result);
return result;
}
答案 0 :(得分：0)
好的，所以我设法解决了这个问题。逻辑有点混乱和hacky但它完成了工作
首先，我们获取用户为自动完成输入的输入ID。然后我们将数据属性city添加到带有输入的数据属性// Google places API code
function searchHotels() {
var inputs = document.querySelectorAll('.yourAccomm');
var cityRu;
var options = {
types: ['establishment'],
componentRestrictions: {country: 'ru'},
};
var autocompletes = [];
for (var i = 0; i < inputs.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(inputs[i], options);
autocomplete.inputId = inputs[i].id;
autocomplete.addListener('place_changed', fillIn);
autocompletes.push(autocomplete);
}
function fillIn() {
var place = this.getPlace();
var myInput = $('#' + this.inputId);
myInput.attr('data-city', place.address_components[3].long_name);
myInput.on('datachange', function(){
var localityData = myInput.data("city");
myInput.closest('.accommodationDivs').find('.cityRu').val(localityData);
});
myInput.data('city', place.address_components[3].long_name).trigger('datachange');
}
}
searchHotels();
，我们通过谷歌API获得的城市为该数据属性赋值。然后我们使用该数据属性用城市名称填充最近的输入。
// Vue Components
Vue.component(/* webpackChunkName: "base-select" */ 'base-select', () => import('./components/base-select.vue'));
// Expose Vue globally
// https://stackoverflow.com/questions/45388795/uncaught-referenceerror-vue-is-not-defined-when-put-vue-setting-in-index-html
window.Vue = Vue;