Button Dropdown: Search

<div class="acl-dropdown-demo-example__container">
    <div class="acl-dropdown-demo-example">
        <div>
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id"
                data-dropdown-type="button-single-select">

                <div class="acl-dropdown__cta acl-button-dropdown__field">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <button class="acl-button acl-button--raised">
                        <span class="acl-button__label">Click here</span>
                    </button>
                </div>

                <div class="acl-dropdown__results acl-button-dropdown__results" data-dropdown-select="true">
                    <div class="acl-dropdown__search" data-dropdown-close="false">
                        <div class="acl-simple-searchbox">
                            <div class="acl-simple-searchbox__search-icon">
                                <i class="aforza-icons">acl_search</i>
                            </div>
                            <input class="acl-simple-searchbox__input" id="acl-demo-simple-search" type="text" name="routeBuilderSearch"
                                placeholder="Search">
                            <div class="acl-simple-searchbox__clear">
                                <i class="aforza-icons acl-demo__icon-catalog-icon-preview">acl_close_small</i>
                            </div>
                            <div class="acl-simple-searchbox__loading-spinner">
                                <svg class="acl-loader__circular" width="20px" height="20px" viewBox="0 0 66 66"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30">
                                    </circle>
                                </svg>
                            </div>
                        </div>
                    </div> 
                    <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
                        {{!-- Results can be manually rendered here --}}
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const results = [{
        id: 'prev',
        value: 'Preview',
    },
    {
        id: 'copy',
        value: 'Copy Link'
    },
    {
        id: 'download',
        value: 'Download'
    },
    {
        id: 'rename',
        value: 'Rename'
    },
    {
        id: 'delete',
        value: 'Delete'
    }];

    // Default Button //
    const dropdownEl1 = document.querySelector(".acl-dropdown-demo-1");
    const dropdown1 = new acl.ACLDropdownSingleSelect(dropdownEl1, results);
    const searchboxEl = document.querySelector(".acl-simple-searchbox");
    const searchbox = new acl.ACLSearchbox(searchboxEl, 300);

    dropdownEl1.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);
    // Default Button - END //
</script>

<!-- Styling used for Demo purposes only. -->
<style>
    .acl-dropdown-demo-example {
        display: flex;
        justify-content: center;
        margin: 25px 25px 25px 0;
    }

    .acl-dropdown-demo-example__container {
        display: flex;
 
    }
</style>