如何在Tagify Jquery插件中删除标签前设置确认消息？

Question

在删除标签之前，我需要确认消息"Yes“或"No”。

插件链接在这里：https://yaireo.github.io/tagify/

有人能帮我吗？

<input name="tag_name" id="tagInput" placeholder="" value="">

<script>
var tagInput = document.querySelector('input[name="tag_name"]');
    tagify = new Tagify(tagInput, {
        whitelist: [],
        maxTags: 1000,
        dropdown: {
            maxItems: 5,           // <- mixumum allowed rendered suggestions
            classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
            enabled: 0,             // <- show suggestions on focus
            closeOnSelect: true    // <- do not hide the suggestions dropdown once an item has been selected
        }
});

tagify.on('remove', function(e) {
    console.log('removed');
});
</script>

Answer 1

根据文档，您可以这样做：

tagify.on('remove', function(e) {
  var a = confirm("Are you sure you want to remove '" + e.detail.data.value + "'?");
  if(a){
    console.log('removed');
  }
  return a;
});

如果您需要UI对话框解决方案，请查看以下内容：

confirm form submit with jquery UI

Send Jquery UI Dialog value to Url.Action

Answer 2

标签移除有一个回调钩子：

var input = document.querySelector('input')
var tagify = new Tagify(input,{
    hooks: {
        /**
         * Removes a tag
         * @param  {Array}  tags [Array of Objects [{node:..., data:...}, {...}, ...]]
         */
        beforeRemoveTag : function( tags ){
            return new Promise((resolve, reject) => {
                confirm("Remove " + tags[0].data.value + "?")
                    ? resolve()
                    : reject()
            })
        }
    }
})

https://github.com/yairEO/tagify#hooks

Answer 3

阅读文档中的hooks section：

您可以使用beforeRemoveTag挂钩：

​

var input = document.querySelector('input')
var tagify = new Tagify(input, {
    hooks: {
        beforeRemoveTag : tags => {
            // set tag loading state
            tagify.tagLoading(tags[0].node, true)

            return new Promise((resolve, reject) => {
                confirm(`Remove ${tags[0].data.value} ?`)
                    ? resolve()
                    : reject()
                
                // unset tag loading state
                tagify.tagLoading(tags[0].node, false)
            })
        }
    }
})

body{ font: 16px arial; }

<script src="https://unpkg.com/@yaireo/tagify"></script>
<link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<input value="xxx, yyy, zzz" placeholder='Try deleting tags'>

​