使用 jQuery 和 google 放置自动完成

Question

大家好，我在俄罗斯使用 google 位置自动完成 establishments。我在操作 DOM 元素时遇到问题。

我想要达到的目标：
在 HTML 中，我有 div 和 autocompleteString class，它隐藏在 CSS 中。在函数 fillIn 中，我从 google 对 place.adr_address 的响应中添加 HTML。然后我使用该响应中的 class locality 来填充 input 和 class 名称 cityRu。不是这部分工作正常。

问题是我将有多个 accommodationDivs 将被动态添加，我正在尝试将 $('.autocompleteString').html(place.adr_address) 和 $('.cityRu').val(cityRu) 添加到它们中的每一个。我正在尝试将 classes autocompleteString 和 cityRu 定位为最接近我的自动完成输入的目标。我正在努力实现这样的目标：
$('.yourAccomm').closest('.accommodationDivs').find('.cityRu').val('mytext') 而不是 $('.yourAccomm') 我需要像 JQ $(this) 或 vanilla JS 等价物，但到目前为止我尝试过的一切都没有奏效。谁能帮我解决这个问题？

这是 place.adr_address 响应的示例：
ул. Рубинштейна, 20, Санкт-Петербург, Россия, 191002

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();

HTML:

<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>

Answer 1

好的，我设法解决了这个问题。逻辑有点混乱和老套，但它完成了工作。
首先，我们获取用户输入的自动完成输入的 ID。然后，我们将数据属性 city 添加到具有输入的数据属性中，并使用我们从 google API 获得的城市为该数据属性赋值。然后我们使用该数据属性用城市名称填充最近的输入。

// 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();

使用 jQuery 和 google 放置自动完成

Using jQuery with google places autocomplete

javascript

jquery

html

google-places-api

googleplacesautocomplete