Tagify whitelist配置：如何实现同名Discord角色与对应唯一ID绑定

Tagify 的 whitelist 参数本身支持传入对象数组，无需拆分角色ID和名称到两个独立数组，可通过字段配置直接实现二者绑定，修改方案如下：

1. 核心配置思路 #

通过 Tagify 内置的 valueKey、labelKey 配置项指定ID、名称对应的字段，选中标签时会自动保留完整的角色对象属性：

• valueKey：设置为 id，作为标签的唯一标识值
• labelKey：设置为 name，作为下拉列表和标签上显示给用户的文本

该方案原生兼容Discord角色重名的场景，唯一ID会全程和角色名称绑定，不会出现匹配错误的问题

2. 完整修改后的代码 #

<script>
    var input = document.querySelector('input[name=tags-outside]');
    // 直接使用服务端返回的原始角色数组，无需拆分
    const guildRoles = {{ guild_roles|tojson }};
    
    new Tagify(input, {
        whitelist: guildRoles,
        userInput: false,
        // 配置字段映射
        valueKey: 'id',
        labelKey: 'name',
        // （可选）自定义下拉列表项渲染，重名时展示ID后4位方便用户区分
        dropdown: {
            mapValueTo: 'name',
            renderItem: (item) => `<div>${item.name} <span style="color:#999;font-size:12px">(${item.id.slice(-4)})</span></div>`
        }
    })
</script>

3. 获取选中的角色ID #

用户选择完成后，可通过以下方式拿到所有选中角色的ID：

// 假设tagify是初始化得到的实例
const selectedRoleIds = tagify.value.map(item => item.id)

如果需要实时监听选择变化，可绑定change事件：

tagify.on('change', (e) => {
    const currentSelectedIds = e.detail.tagify.value.map(item => item.id)
    // 此处处理选中ID的业务逻辑
})

内容的提问来源于stack exchange，提问作者jaal kamza