Ajax Whitelist with "enforceWhitelist" setting enabled

[as247]

How to enforce with ajax whitelist.
I'm using this for user picker, so must enforceWhitelist, but whitelist load from ajax, then previous selected value become invalid and get removed

Thank you.

[yairEO]

Excellent question!

You can merge the currently added tags (Array), tagify.value, to a dynamically loaded whitelist

Example:

var tagify = new Tagify(inputElm, {
	whitelist: initialTagsArray // see "important" section below
})

// listen to custom "input" event
tagify.on('input', onTagifyInput)

// get tags from server (via AJAX for example)
// example of async function 
// developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
function async onTagifyInput(){
    // clear current whitelist
	tagify.settings.whitelist.length = 0; // reset current whitelist
	// show loader & hide suggestions dropdown (if opened)
    tagify.loading(true).dropdown.hide.call(tagify)

	var newWhitelist = await getWhitelistFromServer()

	// replace tagify "whitelist" array values with new values 
    // and add back the ones already choses as Tags
    tagify.settings.whitelist.push(...newWhitelist, ...tagify.value)

    // render the suggestions dropdown
    tagify.loading(false).dropdown.show.call(tagify, e.detail.value);
}

Important:

Make sure the initial whitelist supplied to Tagify, when it first being loaded on the page, includes the user's selected tags, else, if Tagify was loaded with initial tags, cannot know these tags are allowed.

I could, theoretically, change the source-code to always allow tags which were predefined when Tagify was initialized, but I would prefer to be very strict about it, and always follow only what the whitelist setting allows and nothing else, if enforceWhitelist is set to true.