jQuery的标签 - 它 - 使用值和标签对象列表 [英] jQuery Tag-It - using a value and label object list
问题描述
刚试过的出色标记它!插件的jQuery( http://aehlke.github.com/tag-it/ ),但我可以'吨得到它的工作我怎么想。
Just tried the excellent Tag-It! plug-in for jquery (http://aehlke.github.com/tag-it/), but I can't get it to work how I would like.
我有一个这样的对象列表:
I have an object list like this:
var food = [{value:1,label:'Pizza'},{value:2,label:'Burger'},{value:3,label:'Salad'}];
这我传递给tagSource选项在我的设置:
Which I pass to the tagSource option in my setup:
$("#my_food_tags").tagit({
tagSource: food,
singleField: true,
singleFieldNode: $("#my_food"),
placeholderText: "Start typing a food name"
});
这工作得很好,只是当我点击自动完成列表项,它会显示在标签中的数值,而不是食物名称。
This works fine, except when I click the auto-complete list item, it displays the numeric value in the tag, rather than the food name.
因此,有可能不得不'值'输入到隐藏字段,以及标签,以显示作为标记名称
Therefore, it is possible to have to 'value' entered in to the hidden field, and the 'label' to show as the tag name?
下面是我的意思的屏幕截图。该值出现在标记标签,标签被输给醚; - )
Here is a screen-shot of what I mean. The value is appearing in the tag label, and the label is being lost to the ether ;-)
任何人都可以请帮我在这里?这将是非常美联社preciated!
Could anyone please help me here? It would be very much appreciated!
在此先感谢,
SEB
Thanks in advance, Seb
推荐答案
试图用玩了,请参阅: HTTP ://jsfiddle.net/pDrzx/46/
Tried playing around with it, see: http://jsfiddle.net/pDrzx/46/
我所做的:
Extendend的createTag功能与标签
Extendend the createTag function with the labelname
createTag: function(labelname, value, additionalClass)
并把它称为标签上创建VAR
And called it on the label creation var
var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(labelname);
然后,我确信,隐藏的输入字段有数值(保存的目的)
Then i made sure that the hidden input field had the number value(for saving purpose)
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 + '][]" />');
}
最后我加了标签来自动完成并集中
And finally i added the labelname to the autocomplete and focus
// 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方法标签,但不应该是太辛苦:)
So whats missing, well you need to make sure it passes the labelname in all the createTag methods, but that shouldnt be too hard :)
重点更新时(灵感来自@Edwin)
UPDATED WITH FOCUS (INSPIRED BY @Edwin)
这篇关于jQuery的标签 - 它 - 使用值和标签对象列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!