Simple Searchbox: Dropdown

<div style="display:flex;">
    <div onclick="searchboxDemo1.showLoadingSpinner()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO Show Loading Indicator
    </div>

    <div onclick="searchboxDemo1.hideLoadingSpinner()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO Hide Loading Indicator
    </div>
</div>

<div class="acl-simple-searchbox__dropdown-container acl-simple-searchbox__dropdown-container--light-grey acl-simple-searchbox__dropdown-container--rounded-corners" style="width: 550px;">
    <div class="acl-dropdown acl-select-dropdown acl-select-dropdown__small-dropdown-margin acl-dropdown-demo-1" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item">
        <div class="acl-dropdown__cta acl-select-dropdown__field acl-dropdown__cta acl-select-dropdown__field--no-border acl-dropdown__cta acl-select-dropdown__field--no-background">
            <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link acl-select-dropdown__cta-link--dark-grey acl-select-dropdown__cta-link--fixed-width"></div>
            <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
        </div>

        <div class="acl-dropdown__results acl-select-dropdown__results" data-dropdown-select="true">
            <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
            </div>
        </div>
    </div>

    <div class="acl-simple-searchbox__divider"></div>

    <div class="acl-simple-searchbox acl-simple-searchbox--no-border acl-demo-1" style="width: 100%">
        <div class="acl-simple-searchbox__search-icon simple-search-icon__small-margin-top">
            <i class="aforza-icons simple-search-icon__blue-grey simple-search-icon__small-icon">acl_search</i>
        </div>
        <input class="acl-simple-searchbox__input acl-simple-searchbox--no-margin acl-simple-searchbox--no-background simple-search-input-placeholder__dark-grey simple-search-input-placeholder__medium-text" id="acl-demo-simple-search" type="text" name="routeBuilderSearch" placeholder="Search for files" />
        <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>

<script>
    const results = [{
            id: '002csgr',
            value: 'All Files',
            selected: true,
        },
        {
            id: '01sscx',
            value: 'Images',
        },
        {
            id: 'fsx00',
            value: 'Documents',
        },
    ];
    const dropdownEl1 = document.querySelector('.acl-dropdown-demo-1');
    const dropdown1 = new acl.ACLDropdownSingleSelect(dropdownEl1, results);
    dropdownEl1.addEventListener(
        'dropdownitemclicked',
        function(e) {
            console.log('dropdownitemclicked', e.detail);
        },
        false
    );
    dropdownEl1.addEventListener(
        'cleardropdown',
        function(e) {
            console.log('cleardropdown', e.detail);
        },
        false
    );
</script>

<script>
    const searchboxDemoEl = document.querySelector('.acl-demo-1');
    const searchboxDemo1 = new acl.ACLSearchbox(searchboxDemoEl, 300);
    searchboxDemoEl.addEventListener('searchquery', function(e) {
        console.log('searchquery');
        console.log(e.detail);
    });
</script>