英国邮政编码查询 - 谷歌地理编码 - Javascript

Question

我正在尝试修改现有的英国邮政编码查找，以使其外观和行为不同：

• 普通/标准表单按钮
• 结果的文本区域
• 允许用户手动输入门牌号/名称，而不是返回地址1（门牌号码）。

现有代码：

<form>
    <input name="address1" placeholder="address 1" /><br />
    <input name="custom_field"  placeholder="address 2" /><br />
    <input name="address3"  placeholder="address 3" /><br />
    <input name="address4"  placeholder="address 4" /><br />
    <input class="postcode" name="postcode"  placeholder="Postcode" /><br />

</form>

        <script>

        /*fill out the postcode and hit search*/
(function($) {
    $.fn.searchPc = function(options) {

        var settings = $.extend({
            address1: 'address1',
            address2: 'address2',
            address3: 'address3',
            address4: 'address4'
        }, options);

        return this.each(function() {

            var $el = $(this);
            var $form = $el.closest('form');

            //insert the button on the form
            $('<a class="postCodeLookup">Search</a>').insertAfter($el);
            $('.postCodeLookup', $form).button({icons:{primary:'ui-icon-search'}});

            $form.on('click', '.postCodeLookup', function() {

                $.post('https://maps.googleapis.com/maps/api/geocode/json?address='+$el.val()+'&sensor=false', function(r) {
                    var lat = r['results'][0]['geometry']['location']['lat'];
                    var lng = r['results'][0]['geometry']['location']['lng'];
                    $.post('https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=false', function(address) {
                        $('input[name='+settings.address1+']').val(address['results'][0]['address_components'][0]['long_name']);
                        $('input[name='+settings.address2+']').val(address['results'][0]['address_components'][1]['long_name']);
                        $('input[name='+settings.address3+']').val(address['results'][0]['address_components'][2]['long_name']);
                        $('input[name='+settings.address4+']').val(address['results'][0]['address_components'][3]['long_name']);
                    });
                });

            });



        });
    };
})(jQuery);


        $('input[name=postcode]').searchPc({
            address2: 'custom_field',
        });


        </script>

这就是目前的情况：

这就是我希望它的外观和工作方式