Single Select Dropdown: Search

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="acl-dropdown-demo-example" style="width: 225px">
    <div>
        <h5>Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></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__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 acl-select-dropdown__items--no-border-radius" style="max-height: 250px;">
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    const results = [{
            id: '002csg3r',
            value: 'Account Promotions',
            selected: true
        },
        {
            id: '01ss6cx',
            value: 'Segment Promotions'
        },
        {
            id: 'fsx800',
            value: 'Inherited Account Promotions'
        },
        {
            id: '002cs6gr',
            value: 'Account Promotions',
            selected: true
        },
        {
            id: '01ssc7x',
            value: 'Segment Promotions'
        },
        {
            id: 'fsrx00',
            value: 'Inherited Account Promotions'
        },
        {
            id: '0i02csgr',
            value: 'Account Promotions',
            selected: true
        },
        {
            id: '01syscx',
            value: 'Segment Promotions'
        },
        {
            id: 'fsxr00',
            value: 'Inherited Account Promotions'
        },
        {
            id: '002csgar',
            value: 'Account Promotions',
            selected: true
        },
        {
            id: '01sscxs',
            value: 'Segment Promotions'
        },
        {
            id: 'fsx00x',
            value: 'Inherited Account Promotions'
        }
    ];
    const dropdownEl1 = document.querySelector(".acl-dropdown-demo-1");
    const searchboxEl = document.querySelector(".acl-simple-searchbox");
    const dropdown1 = new acl.ACLDropdownSingleSelect(dropdownEl1, results, {
        lazyLoading: true,
        initiallyPopulateResults: true
    });
    const searchbox = new acl.ACLSearchbox(searchboxEl, 300);
    dropdownEl1.addEventListener('dropdownitemclicked',
        function(e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);
    dropdownEl1.addEventListener('scrolledtotop',
        function(e) {
            console.log('Custom Event: scrolledtotop');
        }, false);
    dropdownEl1.addEventListener('scrolledtobottom',
        function(e) {
            console.log('Custom Event: scrolledtobottom');
        }, false);
</script>


        <div class="acl-dropdown-demo-example" style="width: 225px">
    <div>
        <h5>Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id"
            data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></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__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 acl-select-dropdown__items--no-border-radius" style="max-height: 250px;">
                    {{!-- Results can be manually rendered here --}}
                </div>
                
            </div>
        </div>
    </div>
</div>



<script>
    const results = [
    {
        id: '002csg3r',
        value: 'Account Promotions',
        selected: true
    },
    {
        id: '01ss6cx',
        value: 'Segment Promotions'
    },
    {
        id: 'fsx800',
        value: 'Inherited Account Promotions'
    },
        {
        id: '002cs6gr',
        value: 'Account Promotions',
        selected: true
    },
    {
        id: '01ssc7x',
        value: 'Segment Promotions'
    },
    {
        id: 'fsrx00',
        value: 'Inherited Account Promotions'
    },
        {
        id: '0i02csgr',
        value: 'Account Promotions',
        selected: true
    },
    {
        id: '01syscx',
        value: 'Segment Promotions'
    },
    {
        id: 'fsxr00',
        value: 'Inherited Account Promotions'
    },
        {
        id: '002csgar',
        value: 'Account Promotions',
        selected: true
    },
    {
        id: '01sscxs',
        value: 'Segment Promotions'
    },
    {
        id: 'fsx00x',
        value: 'Inherited Account Promotions'
    }
    ];

    const dropdownEl1 = document.querySelector(".acl-dropdown-demo-1");
    const searchboxEl = document.querySelector(".acl-simple-searchbox");
    const dropdown1 = new acl.ACLDropdownSingleSelect(dropdownEl1, results, {
        lazyLoading: true,
        initiallyPopulateResults: true
    });
    const searchbox = new acl.ACLSearchbox(searchboxEl, 300);

    dropdownEl1.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);

        dropdownEl1.addEventListener('scrolledtotop',
        function (e) {
            console.log('Custom Event: scrolledtotop');
        }, false);

    dropdownEl1.addEventListener('scrolledtobottom',
        function (e) {
            console.log('Custom Event: scrolledtobottom');
        }, false);



</script>


        
            
            /* No context defined. */

File:

Content:


                                import { ACLDropdown } from '../index.js';
import { dispatchCustomEvent } from '../../../utilities';

class ACLDropdownSingleSelect extends ACLDropdown {
	constructor(
		dropdownEl,
		results,
		options = {
			showClearOnSelect: false,
			scrollEventPercentageOffset: 80,
			scrollEventDebounceValue: 2000,
			initiallyPopulateResults: true,
			readonly: false,
			dropUp: false,
			dropUpOffset: 12,
			lazyLoading: true,
			disabled: false,
		}
	) {
		super(dropdownEl, results, options);

		this.selectors = {
			...this.selectors,
			selectResultItem: 'acl-select-dropdown__item',
			selectAssociatedColour: 'acl-select-dropdown__cta-link--associated-colour',
			noResultsPlaceholder: 'acl-dropdown__no-results-placeholder',
			placeholder: 'acl-select-dropdown__placeholder',
			configurableContent: 'acl-select-dropdown__configurable-content',
		};

		this.eventName = Object.freeze({
			...this.eventName,
			DROPDOWN_ITEM_CLICKED: 'dropdownitemclicked',
		});

		this.resultItems = this.dropdownEl.querySelector(`.${this.selectors.resultItems}`);
		this.configurableContent = this.dropdownEl.querySelector(`.${this.selectors.configurableContent}`);

		if (this.dropdownType !== this.types.buttonSingleSelect) this.setPlaceholder();

		if (this.resultItems && this.options.initiallyPopulateResults) this.populateResults();

		if (this.configurableContent)
			this.configurableContent.addEventListener(this.eventName.CLICK, () => {
				this.shouldCloseDropdown = false;
			});
	}

	createResultItem(result) {
		let resultItemEl = document.createElement('div');
		let resultIconMarkup = '';

		if (result.associatedColour) resultItemEl.style.borderLeft = `3px solid ${result.associatedColour}`;

		if (result.associatedIcon)
			resultIconMarkup = `<i class="aforza-icons acl-select-dropdown__associated-icon" style="color:${result.associatedIconColour}">${result.associatedIcon}</i>`;

		resultItemEl.innerHTML = `${resultIconMarkup}${result.value}`;
		resultItemEl.classList.add(this.selectors.resultItem);
		this.isDropdownSelect ? resultItemEl.classList.add(this.selectors.selectResultItem) : '';
		resultItemEl.dataset.resultId = result.id;
		resultItemEl.dataset.resultValue = result.value;
		resultItemEl.title = result.value;

		if (result.selected || result.id === this.dropdownEl.dataset.activeSelection) {
			super.setItemAsSelected(resultItemEl);
			this.ctaEl.dataset.active = true;
		}

		resultItemEl.addEventListener(this.eventName.CLICK, this.resultItemClick.bind(this));
		this.resultItems.appendChild(resultItemEl);
	}

	populateResults() {
		if (this.results && this.results.length > 0) {
			this.results.forEach(result => this.createResultItem(result));
		} else {
			super.createEmptyResultsList();
		}
	}

	resultItemClick(event) {
		const result = event.currentTarget;

		if (result) {
			if (this.dropdownType !== this.types.buttonSingleSelect) super.setItemAsSelected(result);
			this.ctaEl.dataset.active = true;

			dispatchCustomEvent(this.dropdownEl, this.eventName.DROPDOWN_ITEM_CLICKED, {
				id: result.dataset.resultId,
				resultName: result.dataset.resultValue,
			});
		}
	}
}

export { ACLDropdownSingleSelect };

URL: /components/raw/single-select-dropdown/index.js
Filesystem Path: src/components/dropdown/single-select-dropdown/index.js
Size: 3.2 KB

Handle: @single-select-dropdown--search
Preview:
- With layout
- Component only
Filesystem Path: src/components/dropdown/single-select-dropdown/single-select-dropdown--search.hbs

No notes defined.