JQuery и Google Maps автозаполнение

Question

У меня есть Google Maps Autocomplete, работающий над несколькими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
}

Этот код, однако, имеет две проблемы:

• Во-первых, я использую Id, чтобы повлиять на несколько полей ввода (у меня много полей ввода). Я попытался выбрать по классу, но это не удалось с ошибкой "не определено". Как я могу применить эту функцию к коллекции полей ввода?
• Как мне узнать, какое поле нажимается? Я пытался использовать JQuery $(this) но это не работает. Как мне может помочь jQuery?

Заранее спасибо!

Answer 1

Вам не нужен 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);
    });
}

JSFiddle demo

Если вы хотите сделать это с помощью 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);
    });
});

JSFiddle demo

Надеюсь это поможет.

Answer 2

Чтобы выяснить, какой элемент ввода вызывается, вы можете передать событие 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 вернул бы значение входного вопроса.