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

时间:2014-08-11 13:06:59

标签: jquery input

我正在输入字段中处理收件人列表,这些收件人会在添加收件人时显示头像。

我使用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
    });
});

1 个答案:

答案 0 :(得分:0)

当前版本的jQuery标签输入插件在删除其中任何一个标签后重新呈现所有标签。您可以使用JS控制台或开发人员工具编辑其中一个标记,然后点击退格键删除另一个标记,然后您将看到原始文件已恢复。

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