jQuery Tag-It - using a value and label object list

Question

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:

Answer 1

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 ? '' : '').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('');
    }

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)