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

Overwriting focus event to handle both label and value is not straightforward. My solution consisted of utilizing close to create the tag using a saved reference of the last ui.item from a focus event:

$$("#search-widget-input")
.tagit(
    {
    placeholderText : 'Select or type a location, postcode or Web ID',
    autocomplete : {
        delay : 200, 
        minLength : 1,
        search : function(event, ui) {
            ...
        },
        select: function(event, ui) {
            // use the item's label instead of value
            $$("#search-widget-input").tagit("createTag", ui.item.label, '__value__' + ui.item.value);
            return false; // prevents the tag input to auto tag the ui.item.value 
        },
        focus: function(event,ui) {
          // `focus` event does not fire `select` but does fires `close` event
          // so we store our `ui.item` which allows us to reference it in `close` event
          event.preventDefault();
          self.oAutoCompleteSavedLastUiItem = ui.item;
        },
        close: function(event, ui) {
          event.preventDefault();
          $$("#search-widget-input").tagit("createTag", self.oAutoCompleteSavedLastUiItem.label, '__value__' + self.oAutoCompleteSavedLastUiItem.value);
          return false; // prevents the tag input to auto tag the ui.item.value 
        },
        source : function fAutocompleteSource(oRequest, fResponse) {
            ...
        }
        ...
    }
    ...
});