javascript - 使用 jQuery 和 google 地方自动完成

Question

大家好，我establishments在俄罗斯使用谷歌地方自动完成功能。我在操作 DOM 元素时遇到问题。

我想要实现的目标：
在 HTML 中，我有 div 和autocompleteString隐藏的类CSS。在功能中fillIn，我HTML从 google 响应中添加了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')我不需要拥有类似 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>

score 0 · Accepted Answer

好的，所以我设法解决了这个问题。逻辑有点混乱和笨拙，但它可以完成工作。
首先，我们获取用户为自动完成而输入的输入 ID。然后我们city通过输入向该数据属性添加数据属性，并使用从谷歌 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();

javascript - 使用 jQuery 和 google 地方自动完成

1 回答 1

Related

Reference