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

Question

У меня есть Google Maps автозаполнение работает на нескольких 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, чтобы воздействовать на несколько полей ввода (у меня много полей ввода). Я пробовал выбирать по классу, но он терпел неудачу с ошибкой «endefined». Как я могу применить эту функцию к набору полей ввода?
• Как узнать, в какое поле щелкнули? Я попытался использовать 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 вернет значение ввода, о котором идет речь.