Create Item for multi select.

[razvanFrandes]

I didn't seem to find any option to create a item, when I'm using the <select multiselect></select>, it is possible using <input /> but there is no dropdown where I can select the values.

[sahapranta]

I am managing this somehow, at least working. I can add custom tags

    const tagsElement = document.querySelector('#input-tags');

    tagsElement.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            e.stopPropagation();
        }
    });

    const inputTags = new Choices(tagsElement, {
        allowHTML: true,        
        shouldSort: false,
        searchEnabled: true,
        removeItemButton: true,
        maxItemCount: 10,
        placeholder: true,
        placeholderValue: "{{ __('Type or Select skills') }}",
    });

    tagsElement.addEventListener('search', debounce(e => searchTags(e)));
    let enterKeyHandlerAdded = false;
    let currentValue = '';

    async function searchTags(event) {
        let {
            value,
            resultCount
        } = event.detail;

        if (value && value.length > 1 && resultCount === 0) {
            let element = document.querySelector(".has-no-results");
            if (element) {
                element.innerHTML = `Press enter to add <b>"${value}"</b>`;
            }

            if (!enterKeyHandlerAdded) {
                enterKeyHandlerAdded = true;
                document.body.addEventListener('keyup', setCustomTag);
            }

            currentValue = value;
        } else if (enterKeyHandlerAdded) {
            removeEnterListenerFromInput();
        }
    }

    function setCustomTag(e) {
        e.preventDefault();
        e.stopPropagation();
        if (e.key === 'Enter') {
            if (currentValue) {
                inputTags.setValue([{
                    label: currentValue,
                    value: currentValue
                }]);
                inputTags.clearInput();
            }
            removeEnterListenerFromInput();
        }
    }

    function removeEnterListenerFromInput() {
        document.body.removeEventListener('keyup', setCustomTag);
        enterKeyHandlerAdded = false;
        currentValue = '';
    }

    function debounce(fn, t = 600) {
        let timer;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), t);
        };
    }

[Xon]

Implemented as part of #1166