刚刚尝试过优秀的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启发)