Manipulate google 在动态加载的文本字段上映射自动完成结果

Question

我有一个页面包含未知数量的“.city-name”文本字段（动态生成）。

我在处理这些字段生成后的自动完成结果时遇到问题。我认为我的循环没有做正确的事情。

function getPlace_dynamic() {

    var options = {types: ['(cities)']};
    var inputs = document.getElementsByClassName('city-name');

    for (i = 0; i < inputs.length; i++) {
        var places = new google.maps.places.Autocomplete(inputs[i], options);

        google.maps.event.addDomListener(inputs[i], 'keydown', function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });

        google.maps.event.addListener(places, 'place_changed', function () {
            var results = places.getPlace();
            var address_components = results.address_components;
            var components = {};

            jQuery.each(address_components, function (k, v1) {
                jQuery.each(v1.types, function (k2, v2) {
                    components[v2] = v1.long_name;
                });
            });

            $(inputs).val(components.locality + ", " + components.country);
            $(inputs).closest("form").submit();
        });
    }
}

可以在“#txtPlaces”JsFiddle 中看到每个“.city-name”所需的行为。我需要将框值转换为"City, Country"，然后在选择后提交。

我禁用了回车键，因为那是在提交自动完成时没有将其切换到 "City, Country"。

Answer 1

我使用 jQuery $.each 得到它：似乎有效。

var options = {
    types: ['(cities)']
};
var input = document.getElementsByClassName('city-name');

  $.each(input, function(i, x){
  var this_id = input[i].id;
  var this_input = document.getElementById(this_id);
  var places = new google.maps.places.Autocomplete(input[i], options);

     google.maps.event.addListener(places, 'place_changed', function () {
        var results = places.getPlace();
        var address_components = results.address_components;
        var components = {};

        jQuery.each(address_components, function (k, v1) {
            jQuery.each(v1.types, function (k2, v2) {
                components[v2] = v1.long_name;
            });
        });

        $(this_input).val(components.locality + ", " + components.country);
        $(this_input).closest("form").submit();
    });

    google.maps.event.addDomListener(input[i], 'keydown', function (e) {
        if (e.keyCode == 13) {
            e.preventDefault();
        }
    });

})
 }

Manipulate google 在动态加载的文本字段上映射自动完成结果

Manipulate google maps autocomplete results on dynamically loaded text fields

google-maps

autocomplete

google-places-api