Ajax Whitelist with "enforceWhitelist" setting enabled
as247 opened this issue · 1 comments
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.
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.