Question

我的页面中包含未知数量的＆＃34; .city-name＆＃34;文本字段（动态生成）。

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

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();
        });
    }
}

每个＆＃34; .city-name＆＃34;的期望行为可以在＆＃34; #txtPlaces＆＃34;的jsfiddle。我需要将框值转换为＆＃34; City，Country＆＃34;，然后提交一次。

我已经禁用了输入密钥，因为它提交的是自动完成功能而没有将其切换到＆＃34; City，Country＆＃34;。

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();
        }
    });

})
 }

在动态加载的文本字段上处理谷歌地图自动完成结果

1 个答案: