jQuery Tag-It - 使用值和标签对象列表

Question

刚刚尝试了出色的 Tag-It! jquery 插件 ( http://aehlke.github.com/tag-it/ )，但我无法让它按照我想要的方式工作。

我有一个像这样的对象列表:

var food = [{value:1,label:'Pizza'},{value:2,label:'Burger'},{value:3,label:'Salad'}];

我将其传递给设置中的 tagSource 选项:

$("#my_food_tags").tagit({
    tagSource: food,
    singleField: true,
    singleFieldNode: $("#my_food"),
    placeholderText: "Start typing a food name"
});

这工作正常，除了当我单击自动完成列表项时，它显示标签中的数值，而不是食物名称。

因此，是否可以在隐藏字段中输入“值”，并将“标签”显示为标签名称？

这是我的意思的屏幕截图。该值出现在标签标签中，并且标签正在被以太丢失;-)

有人可以帮我吗？我们将不胜感激!

提前致谢，塞布

Answer 1

尝试使用它，请参阅:http://jsfiddle.net/pDrzx/46/

我做了什么:

使用标签名称扩展createTag函数

 createTag: function(labelname, value, additionalClass)

并在标签创建var上调用它

var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(labelname);

然后我确保隐藏的输入字段具有数值(用于保存目的)

  if (this.options.singleField) {
        var tags = this.assignedTags();
        tags.push(value);
        this._updateSingleTagsField(tags);
    } else {
        var escapedValue = value;
        tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.itemName + '[' + this.options.fieldName + '][]" />');
    }

最后我将标签名称添加到自动完成和焦点

        // Autocomplete.
        if (this.options.availableTags || this.options.tagSource) {
            this._tagInput.autocomplete({
                source: this.options.tagSource,
                select: function(event, ui) {
                    // Delete the last tag if we autocomplete something despite the input being empty
                    // This happens because the input's blur event causes the tag to be created when
                    // the user clicks an autocomplete item.
                    // The only artifact of this is that while the user holds down the mouse button
                    // on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
                    // and is changed to the autocompleted text upon mouseup.
                    if (that._tagInput.val() === '') {
                        that.removeTag(that._lastTag(), false);
                    }
                    that.createTag(ui.item.label,ui.item.value);
                    // Preventing the tag input to be updated with the chosen value.
                    return false;
                },
            focus: function(event, ui) {
                event.preventDefault();
                that.createTag(ui.item.label,ui.item.value);
            }
            });

所以缺少什么，你需要确保它在所有 createTag 方法中传递标签名称，但这不应该太难:)

<小时/>

重点更新(灵感来自@Edwin)