结合使用jQuery和Google Places自动完成功能

问题描述

您好，我在俄罗斯使用的Google地方信息自动完成场所的位置.我在处理DOM元素时遇到问题.

Hello guys I'm using google places autocomplete for establishments in Russia. I'm having problems with manipulating DOM elements.

我要实现的目标:
在HTML中，我有一个 autocompleteString 类的div，该类被 CSS 隐藏.在功能 fillIn 中，我要从Google响应中向其中添加 HTML 并使用 place.adr_address .然后，我从该响应中使用类 locality 填充类名称为 cityRu 的 input .这部分工作不正常.

What I'm trying to achieve:
In HTML I have div with autocompleteString class which is hidden with CSS. In function fillIn I'm adding HTML to it from google response with place.adr_address. Then I'm using class locality from that response to populate input with class name cityRu. Not this part works fine.

问题是我将动态添加多个 accommodationDivs ，并且我正在尝试添加 $('.autocompleteString').html(place.adr_address)和 $('.cityRu').val(cityRu)中的每一个.我正在尝试定位与我的自动完成输入最接近的类 autocompleteString 和 cityRu .我正在尝试实现以下目标:
$('.yourAccomm').closest('.accommodationDivs').find('.cityRu').val('mytext')，而不是 $('.yourAccomm')我需要类似JQ $(this)或香草JS的东西，但到目前为止，我尝试过的所有方法均无效.谁能帮我这个忙吗?

Problem is that I will have multiple accommodationDivs that will be added dynamically and I'm trying to add $('.autocompleteString').html(place.adr_address) and $('.cityRu').val(cityRu) to each one of them. I'm trying to target classes autocompleteString and cityRu closest to my autocomplete input.I'm trying to achieve something like this:
$('.yourAccomm').closest('.accommodationDivs').find('.cityRu').val('mytext') but instead of $('.yourAccomm') I need to have something like JQ $(this) or vanilla JS equivalent, but everything I've tried so far didn't work. Can anyone please help me with this ?

这是 place.adr_address 响应的示例:
< span class ="street-address">ул.Рубинштейна，20</span> ;,< span class ="locality">Санкт-Петербург</span> ;,< span class ="country-name">Россия</span&class =，邮政编码> 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();

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>

推荐答案

好的，所以我设法解决了这个问题.逻辑有点杂乱无章，但可以完成工作.
首先，我们获得用户正在键入自动完成功能的输入的ID.然后，使用输入向其添加数据属性 city ，并使用从Google API获得的城市给该数据属性赋值.然后，我们使用该数据属性以城市名称填充最近的输入.

Okay so I managed to solve this. Logic is a bit messy and hacky but it gets the job done.
First we get ID of input that user is typing for autocomplete. Then we add data attribute city to that with input and we give value to that data attribute with city we get from google API. Then we use that data attribute to populate nearest input with city name.

// 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 Places自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！