How can I use dynamic whitelist on yairEO/tagify?

Question

I'm working on a WordPress project with PHP & MySQL and I am using Tagify for create some tags. The trouble is that I want to have a dynamic whitelist based on users tags. The tags are being saved on wp_postmeta, so I think that I could use a MySQL query but I haven't had any success.

Here is the code that I am using:

<script type="text/javascript">
jQuery(document).ready(function(){
var input = document.querySelector("#keywords"),
    // init Tagify script on the above inputs
    tagify = new Tagify(input, {
        enforceWhitelist : false,
        pattern    :'', 
        whitelist: [],
        blacklist:[],
        maxTags: 20,
        dropdown: {
            maxItems: 20,          
            classname: "tags-look", 
            enabled: 0,            
            //position: "text",
            closeOnSelect: false,    
            highlightFirst: true
          } 
    })
});

</script>

Answer 1

Dynamically-loaded suggestions list (whitelist) from the server (as the user types) is a frequent need to many.

Tagify comes with its own loading animation, which is a very lightweight CSS-only code, and the loading state is controlled by the method tagify.loading which accepts true or false as arguments.

Below is a basic example using the fetch API. I advise aborting the last request on any input before starting a new request.

var input = document.querySelector('input'),
    tagify = new Tagify(input, { whitelist: [] }),
    controller; // for aborting the call


// listen to any keystrokes which modify tagifys input
tagify.on('input', onInput)


function onInput(e) {
    var value = e.detail.value
    tagify.whitelist = null // reset the whitelist

    // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
    controller && controller.abort()
    controller = new AbortController()

    // show loading animation and hide the suggestions dropdown
    tagify.loading(true).dropdown.hide()

    fetch('http://get_suggestions.com?value=' + value, { signal: controller.signal })
        .then(RES => RES.json())
        .then(function (newWhitelist) {
            tagify.whitelist = newWhitelist // update whitelist Array in-place
            tagify.loading(false).dropdown.show(value) // render the suggestions dropdown
        })
}

source: https://github.com/yairEO/tagify#ajax-whitelist