如何将额外数据与 Tag-it 标签一起存储？答案

【问题标题】：How do I store extra data together with Tag-it tags?如何将额外数据与 Tag-it 标签一起存储？
【发布时间】：2012-03-13 10:36:41
【问题描述】：

我们使用带有 Ajax 调用的 Tag-it 作为 tagSource 来标记内容。我们需要包含比标签标签本身更多的数据，例如与标签或元数据（例如标签类型）不同的 id。返回到 Ajax 调用但我们不希望包含在标记标签本身中的数据。

我们可以使用 jQuery's .data method 修改 Tag-it 以包含带有 li 项目的数据，但如果其他人已经解决了这个问题或者可以推荐另一个标签库，我们将不胜感激。

【问题讨论】：

标签： javascript jquery tag-it

【解决方案1】：

在不修改 Tag-it 的情况下执行此操作的关键是弥合从自动完成 Ajax 调用返回的额外数据与 Tag-it afterTagAdded 事件之间的差距。

将变量itemData 添加到作用域中，该变量将用于存储来自自动完成项的附加数据：

{
    var itemData;

获取标签元素的引用，以便调用创建标签行为

    var theTags = $('#tags');

    theTags.tagit({

处理自动完成的select事件并存储来自所选自动完成项的附加数据，然后创建标签。

        autocomplete: {
            source: [
                {value:'User Tag',data:{id: 1, type: 'userTag'}},
                {value:'System Tag',data:{id: 2, type: 'systemTag'}}
            ],
            select: function(event,ui) {
                itemData = ui.item.data;
                theTags.tagit("createTag", ui.item.value);
                return false;
            }
        },

为 Tag-it 处理 afterTagAdded 事件。在这里可以实现修改刚刚添加的标签的任何自定义行为。

        afterTagAdded: function(event, ui) {
            if (itemData) {
                $(ui.tag).data('type', itemData); // store all data
                $(ui.tag).find('input').val(itemData.id); // use a bit of the data
                itemData = null;
            }
        }
    });
}

在http://jsfiddle.net/yuhxL/2/查看此解决方案的工作示例

【讨论】：