3

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">

Enterキーを押してフォームを送信するのをブロックしています。ユーザーがキーを押してテキスト フィールドからフォーカスを外した場合にのみ、#Subscription_address がリセットされ、Google Places API が #Subscription_address に「未定義」の値を表示します。

現在、Tab キーの押下とマウスの選択は、ぼかしイベントとして期待どおりに機能し、他のフィールドに入力し、#Subscription_address フィールドに streetAddress のみを保持します。

JQueryを使用して、Enterキーを押してテキストフィールドからフォーカスを外し、選択した値を保持して、ユーザーがオートコンプリート結果を選択できるようにするにはどうすればよいですか?

4

1 に答える 1

1 
       // update the textboxes
        setTimeout(function(){$('#Subscription_address').val(streetAddress).blur(function(e){
            this.value = streetAddress;
        });},50);

ぼかし機能の後に this.streetAddress を削除する必要がありました。これは、ドロップダウンの DOM では異なるコンテキストを持っていました。

于 2013-08-17T18:56:46.160 に答える