Use external address lookup APIs

Use external address lookup APIs (craftyclicks.co.uk)

You must define javascript function wpo_get_address_autocomplete_init

Sample code, you must replace YOUR_API_KEY with your key.

add_action('wpo_before_render_html_app', function () {
?>
<style>

            .wpo-custom-autocomplete-list {
            position: absolute;
            background-color: white;
            width: 96%;
            padding: 10px;
            z-index: 100;
            max-height: 200px;
            overflow-y: scroll;
            }

            .wpo-custom-autocomplete-list li {
            cursor: pointer;
            }

            </style>

            <script type="text/javascript" src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>

            <script>
            function wpo_get_address_autocomplete_init(elem, selectedCallback) {
                var key_api = 'YOUR_API_KEY ';  //PUT YOUR API KEY
                var on_select_address = function (v) {
                    jQuery.get(
                        'https://api.craftyclicks.co.uk/address/1.1/retrieve',
                        {
                        'key': key_api,
                        'country': 'GB',
                        'id': v.id,
                        'lines': 5,
                        },
                        function (a) {
                            result = a.result;
                            selectedCallback({
                                address_1: result.line_1,
                                address_2: result.line_2 || result.line_3 || result.line_4 || result.line_5,
                                city: result.locality,
                                country: "GB",
                                postcode: result.postal_code,
                                state: result.province_name,
                                street_number: result.building_number,
                            });
                            jQuery(elem).val('').trigger('input');
                        }
                    );
                };

                var on_select_group = function (v) {
                    jQuery.get(
                        'https://api.craftyclicks.co.uk/address/1.1/find',
                        {
                        'key': key_api,
                        'query': jQuery(elem).val(),
                        'country': 'GB',
                        'id': v.id,
                        },
                        function (d) {
                            var ul = jQuery('<ul class="wpo-custom-autocomplete-list"></ul>');
                            d.results.forEach(function (a, i) {
                                ul.append(jQuery('<li data-index="'+ i +'">'+ (a.labels.filter(function () { return !!a; }).join(' ')) +'</li>').on('click', function () {
                                    on_select_address(
                                    Object.assign({}, a)
                                    );
                                })
                                );
                            });
                            jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
                            jQuery(elem).after(ul);
                        }
                    );
                };

                jQuery(elem).on('input', function () {

                if (!jQuery(this).val()) {
                    jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
                    return;
                }

                jQuery.get(
                    'https://api.craftyclicks.co.uk/address/1.1/find',
                    {
                    'key': key_api,
                    'query': jQuery(this).val(),
                    'country': 'GB',
                    },
                    function (d) {
                        var ul = jQuery('<ul class="wpo-custom-autocomplete-list"></ul>');

                        d.results.forEach(function (v, i) {
                            if(v.count == 1) {
                                ul.append(jQuery('<li data-index="'+ i +'">'+ (v.labels.filter(function () { return !!v; }).join(' ')) +'</li>').on('click', function () {
                                    on_select_address(
                                    Object.assign({}, v)
                                    );
                                })
                                );
                            }
                            else {
                                ul.append(jQuery('<li data-index="'+ i +'">'+ (v.labels.filter(function () { return !!v; }).join(' ')) +'</li>').on('click', function () {
                                    on_select_group(
                                    Object.assign({}, v)
                                    );
                                })
                                );
                            }
                        });
                        jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();
                        jQuery(elem).after(ul);
                    }, 
                'json');
                });
            }
            </script>
            <?php
        });

        add_filter('wpo_custom_init_autocomplete_js_function', function () {
            return 'wpo_get_address_autocomplete_init';
        });

        add_filter('wpo_custom_init_autocomplete_placeholder', function ($placeholder) {
            return $placeholder;
        });

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

add_action('wpo_before_render_html_app', function () {

<style>

.wpo-custom-autocomplete-list {

position: absolute;

background-color: white;

width: 96%;

padding: 10px;

z-index: 100;

max-height: 200px;

overflow-y: scroll;

}

.wpo-custom-autocomplete-list li {

cursor: pointer;

}

</style>

function wpo_get_address_autocomplete_init(elem, selectedCallback) {

var key_api = 'YOUR_API_KEY '; //PUT YOUR API KEY

var on_select_address = function (v) {

jQuery.get(

'https://api.craftyclicks.co.uk/address/1.1/retrieve',

{

'key': key_api,

'country': 'GB',

'id': v.id,

'lines': 5,

function (a) {

result = a.result;

selectedCallback({

address_1: result.line_1,

address_2: result.line_2 || result.line_3 || result.line_4 || result.line_5,

city: result.locality,

country: "GB",

postcode: result.postal_code,

state: result.province_name,

street_number: result.building_number,

});

jQuery(elem).val('').trigger('input');

}

);

};

var on_select_group = function (v) {

jQuery.get(

'https://api.craftyclicks.co.uk/address/1.1/find',

{

'key': key_api,

'query': jQuery(elem).val(),

'country': 'GB',

'id': v.id,

function (d) {

var ul = jQuery('<ul class="wpo-custom-autocomplete-list"></ul>');

d.results.forEach(function (a, i) {

ul.append(jQuery('<li data-index="'+ i +'">'+ (a.labels.filter(function () { return !!a; }).join(' ')) +'</li>').on('click', function () {

on_select_address(

Object.assign({}, a)

);

})

);

});

jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();

jQuery(elem).after(ul);

}

);

};

jQuery(elem).on('input', function () {

if (!jQuery(this).val()) {

jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();

return;

}

jQuery.get(

'https://api.craftyclicks.co.uk/address/1.1/find',

{

'key': key_api,

'query': jQuery(this).val(),

'country': 'GB',

function (d) {

var ul = jQuery('<ul class="wpo-custom-autocomplete-list"></ul>');

d.results.forEach(function (v, i) {

if(v.count == 1) {

ul.append(jQuery('<li data-index="'+ i +'">'+ (v.labels.filter(function () { return !!v; }).join(' ')) +'</li>').on('click', function () {

on_select_address(

Object.assign({}, v)

);

})

);

}

else {

ul.append(jQuery('<li data-index="'+ i +'">'+ (v.labels.filter(function () { return !!v; }).join(' ')) +'</li>').on('click', function () {

on_select_group(

Object.assign({}, v)

);

})

);

}

});

jQuery(elem).siblings('.wpo-custom-autocomplete-list').remove();

jQuery(elem).after(ul);

'json');

});

}

</script>

<?php

});

add_filter('wpo_custom_init_autocomplete_js_function', function () {

return 'wpo_get_address_autocomplete_init';

});

add_filter('wpo_custom_init_autocomplete_placeholder', function ($placeholder) {

return $placeholder;

});

Phone Orders for WooCommerce

Use external address lookup APIs