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

问题描述

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'}];

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 ;-)

Could anyone please help me here? It would be very much appreciated!

Thanks in advance, Seb

解决方案

Tried playing around with it, see: http://jsfiddle.net/pDrzx/46/

What i did:

Extendend the createTag function with the labelname

 createTag: function(labelname, value, additionalClass)

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);
            }
            });

So whats missing, well you need to make sure it passes the labelname in all the createTag methods, but that shouldnt be too hard :)

---

UPDATED WITH FOCUS (INSPIRED BY @Edwin)

这篇关于jQuery Tag-It - 使用值和标签对象列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！