Algol Plus Ltd

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;
        });