jQuery的标签 - 它 - 使用值和标签对象列表 [英] jQuery Tag-It - using a value and label object list

查看:91
本文介绍了jQuery的标签 - 它 - 使用值和标签对象列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

刚试过的出色标记它!插件的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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆