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

刚刚尝试过优秀的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"
});

这可以正常工作,除非我单击自动完成列表项,它会在标签中显示数值,而不是食物名称.

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

这是我的意思的屏幕截图.该值出现在标签标签中,标签丢失到以太网;-)

有人可以帮我吗这将非常感谢！

提前致谢,
勒布

解决方法

试着玩吧,看： http://jsfiddle.net/pDrzx/46/

我做了什么：

使用labelname扩展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 + '][]" />');
    }

最后我添加了labelname到自动完成和焦点

// 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方法中传递labelname,但是不应该太难了:)

更新为焦点(由@Edwin启发)