Feature Request: Select Element with Options

[randallmlough]

I was looking for a way to parse the tags before submitting a form, kind of like #220. I get why you want to leave it up to the developer to do what they want with the raw data, but I do think there's value in providing valid form data out of the box.

I created a helper func that does this for me, but the drawback is I have to call this helper for each event change. I think it would be a great addition if the user adds the tagify selector to a select element it will update the element with proper options.

Here's what I've done to get this to work. I'm very much a js rookie so it probably could be improved for performance.

<select class="tags" name="some-name" id="select" multiple></select>

document.querySelectorAll('select.tags').forEach(elm => {
    const tagify = new Tagify(elm , {
            whitelist : ["Tag 1", "Tag 2"],
            dropdown : {
                enabled: 1,
            }
        });

    setOptions(elm, tagify.value)

    tagify.on('add', () => setOptions(elm, tagify.value))
        .on('remove', () => setOptions(elm, tagify.value))
        .on('edit', () => setOptions(elm, tagify.value))

})

function setOptions(selectElm, obj) {
    while (selectElm.firstChild) {
        selectElm.removeChild(selectElm.firstChild);
    }
    const fragment = document.createDocumentFragment();
    for (var i = 0; i < Object.keys(obj).length; i++) {
        let v = obj[i].value
        const option = new Option(v,v)
        option.setAttribute("selected","selected")
        fragment.appendChild(option)
    }
    selectElm.appendChild( fragment.cloneNode(true))
}

[yairEO]

I'm sorry but I don't understand what is the purpose of all this..
maybe a demo page may shed some light so I could better understand the scenario

[yairEO]

Now Tagify has the option to behave as a "select" element: See demo