Question

我正在使用jQuery插件Tag-It来处理自动建议和标记。我正在使用Ajax调用获取数据，该调用正常。

目前的数据按以下格式返回：

{"itemID":"ItemName"}

例如：

{"1":"Yellow","2":"Green"}

这很好。

我想要做的是让用户点击返回的标签，并将数据存储在隐藏字段中，如下所示：

<input type="hidden" name="tag['itemID']['itemName']"/>

我似乎无法弄明白该怎么做，有没有人有这方面的经验并且能指出我正确的方向？

Answer 1

要做到这一点，需要将自动完成Ajax调用返回的额外数据传递给Tag-it标记事件。

将变量itemId添加到范围，该范围将用于存储自动完成项目中的其他数据：

{
    var itemId;

获取对tags元素的引用，以便可以调用create标记行为

    var theTags = $('#tags');

    theTags.tagit({

处理自动填充的select事件并存储所选自动填充项目中的其他数据，然后创建代码。

        autocomplete: {
            source: [{id:1,value:'New 1'},{id:2,value:'New 2'}],
            select: function(event,ui) {
                itemId = ui.item.id;
                theTags.tagit("createTag", ui.item.value);
                return false;
            }
        },

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

        afterTagAdded: function(event, ui) {
            if (itemId) {
                $(ui.tag).find('input')
                     .attr('name', "tag[\'" + itemId+ "']['" + ui.tagLabel + "']");
                itemId = null;
            }
        }
    });
}

请在http://jsfiddle.net/DCJsj/

查看此解决方案的工作示例

发送ID但显示标签

1 个答案: