使用ajax / jquery使用邮政编码查找地址?

时间:2015-06-08 10:48:18

标签: jquery ajax

我发现这个非常棒的脚本会使用邮政编码查找地址。它适用于JsFiddle,但当我尝试将其实现到我网站上的页面时,它不会做任何事情。

http://jsfiddle.net/rxFBj/3/

我的代码:

<form name="request">
    <p>Fill out the postcode and hit search</p>

        <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 src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>     
     <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('http://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('http://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>

如果我做错了什么,有人可以告诉我吗?感谢

1 个答案:

答案 0 :(得分:0)

查看您的JavaScript控制台。观看它抱怨$未定义。

你已经加载了jQuery-UI(两次!)但不是jQuery,所有代码都依赖于jQuery。