【问题标题】:Google places autocomplete & Blur problems谷歌放置自动完成和模糊问题
【发布时间】:2013-08-18 10:54:27
【问题描述】:

我有一个表单,它实现了 Google Places 来自动完成和填充其他文本字段。

    <script type="text/javascript">
    $(document).ready(function(){
        $('.noEnterSubmit').keypress(function(e){
            if ( e.which == 13 ) return false;
        });

        var updateAddress = {

        autocomplete: new google.maps.places.Autocomplete($("#Subscription_address")[0], {types: ['geocode']}),

        event: function(){
            var self = this;    
            google.maps.event.addListener(self.autocomplete, 'place_changed', function() {
                var place = self.autocomplete.getPlace(),
                    address = place.address_components,
                    streetAddress = '',
                    suburb = '',
                    state = '',
                    zip = '',
                    country = '';

                for (var i = 0; i < address.length; i++) {
                    var addressType = address[i].types[0];

                    if (addressType == 'subpremise') {
                        streetAddress += address[i].long_name + '/';
                    }
                    if (addressType == 'street_number') {
                        streetAddress += address[i].long_name + ' ';
                    }
                    if (address[i].types[0] == 'route') {
                        streetAddress += address[i].long_name;
                    }
                    if (addressType == 'locality') {
                        suburb = address[i].long_name;
                    }
                    if (addressType == 'administrative_area_level_1') {
                        state = address[i].long_name;
                    }
                    if (addressType == 'postal_code') {
                        zip = address[i].long_name;
                    }
                    if (addressType == 'country') {
                        country = address[i].long_name;
                    }
                }

                // update the textboxes
                setTimeout(function(){$('#Subscription_address').val(streetAddress).blur(function(e){
                    this.value = this.streetAddress;
                });},50);
                $('#Subscription_city').val(suburb);
                $('#Subscription_state').val(state);
                $('#Subscription_zip').val(zip);
                $('#Subscription_country').val(country);
            });

        }
    };

    updateAddress.event();

    });
    </script>
    </head> 

<input class="noEnterSubmit input-large" name="Subscription[address]" id="Subscription_address" type="text">

我阻止表单在输入键时提交。只有当用户输入按键然后焦点离开文本字段时,#Subscription_address 才会重置,Google Places API 才会显示#Subscription_address 的“未定义”值。

目前,作为模糊事件的选项卡按键和鼠标选择可按预期填充其他字段并仅在 #Subscription_address 字段中保留 streetAddress。

使用 JQuery,我如何允许用户通过使用 enter 键选择自动完成结果,然后将焦点移开文本字段并保留所选值?

【问题讨论】:

    标签: jquery google-places-api


    【解决方案1】:
           // update the textboxes
            setTimeout(function(){$('#Subscription_address').val(streetAddress).blur(function(e){
                this.value = streetAddress;
            });},50);
    

    我需要在模糊功能后删除 this.streetAddress。 this 在下拉列表的 DOM 中具有不同的上下文。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-01
      • 1970-01-01
      • 1970-01-01
      • 2012-02-20
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多