如何在yairEO/tagify上使用动态白名单？

Question

我正在使用PHP & MySQL开发一个WordPress项目，并使用塔格化创建一些标记。问题是我想要一个基于用户标签的动态白名单。标记被保存在wp_postmeta上，所以我想我可以使用MySQL查询，但我没有成功。

下面是我使用的代码：

<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

来自服务器的动态加载建议列表(白名单)(作为用户类型)是许多人经常需要的。

Tagify附带了自己的加载动画，这是一个非常轻量级的CSS专用代码，加载状态由方法tagify.loading控制，该方法接受true或false作为参数。

下面是使用fetch API的一个基本示例。我建议在启动新请求之前对任何输入中止最后一个请求。

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
        })
}

来源：https://github.com/yairEO/tagify#ajax-whitelist