将图像添加到 jQuery 标签输入插件答案

【问题标题】：Adding images to jQuery Tags Input plugin将图像添加到 jQuery 标签输入插件
【发布时间】：2014-08-11 13:06:58
【问题描述】：

我正在处理收件人列表的输入字段，添加收件人时将显示头像。

我使用jQuery Tags Input Plugin 以便用户可以输入多个收件人，用逗号分隔。

当回调函数 onAddTag 被调用时，它会将标签中的文本替换为头像，然后是值。然而，当用户按下退格键或移除标签时，化身将从所有收件人中移除。任何想法我应该如何更改我的 onAddTag 函数以保持头像加载？

这是jsFiddle 和代码：

$(document).ready(function() {
    $('#recipients').tagsInput({
        'height': 'auto',
        'width': 'auto',
        'defaultText': 'Add a tag',
        'onAddTag': function(elem, elem_tags) {
            $('.tag', elem_tags).each(function() {
                var username = $(this).text();
                username = username.replace('x', '');
                username = username.replace(/\s/g, '');
                $(this).html('<img src="https://minotar.net/helm/' + username + '/16" alt="' + username + '"> ' + $(this).text());
            });
        },
        'minChars' : 3,
        'maxChars' : 16
    });
});

【问题讨论】：

标签： jquery input

【解决方案1】：

当前版本的 jQuery 标签输入插件会在 all 标签中的任何一个被删除后重新渲染。您可以使用 JS 控制台或开发者工具编辑其中一个标签，然后按退格键删除另一个标签，然后您会看到原始标签已恢复。

为了解决这个问题，我认为插件允许的最佳选择是使用onChange 回调来添加头像，而不是onAddTag。这样，每次重新渲染标签时都会调用您的头像插入函数，无论是添加还是删除标签！

【讨论】：