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

【问题标题】：how to set confirmation message before remove tag in Tagify Jquery plugin?如何在 Tagify Jquery 插件中删除标签之前设置确认消息？
【发布时间】：2020-03-04 10:15:55
【问题描述】：

在删除标签之前，我需要确认消息“是”或“否”。

插件链接在这里：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>

【问题讨论】：

你试过window confirm
是的，我知道，但在删除标签之前我只需要确认。
可能是我理解错了，在做某事之前需要用户确认吗？
是的，如果用户说是，那么在删除标签后。但没有发生。
那正是你要找的东西

标签： javascript jquery jquery-ui

【解决方案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 Dialog 解决方案，请查看以下内容：

confirm form submit with jquery UI

Send Jquery UI Dialog value to Url.Action

【讨论】：

【解决方案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

【讨论】：

【解决方案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'>

【讨论】：