From a7348db2870545fbce6ad9ecf852df4bef6b81d3 Mon Sep 17 00:00:00 2001 From: vedatkilic Date: Tue, 18 Aug 2015 13:59:36 +0300 Subject: [PATCH 1/2] tag-it.js object support Tag-it.js does not support custom js object and jquery autocomplete object. It shows always value of autocomplete object. I think that is wrong. It shows label of object and it is unnecessary to support default values with input and li elements. An option parameter with name items can be used as default values and custom object can be used owing to this. --- js/tag-it.js | 71 ++++++++++++++++++++++++---------------------------- 1 file changed, 33 insertions(+), 38 deletions(-) diff --git a/js/tag-it.js b/js/tag-it.js index 078c264f..1e37be34 100644 --- a/js/tag-it.js +++ b/js/tag-it.js @@ -103,7 +103,8 @@ onTagAdded : null, onTagRemoved: null, // `autocomplete.source` is the replacement for tagSource. - tagSource: null + tagSource: null, + items : null // Do not use the above deprecated options. }, @@ -190,34 +191,21 @@ that.tagInput.focus(); } }); - + + // Single field support. - var addedExistingFromSingleFieldNode = false; if (this.options.singleField) { - if (this.options.singleFieldNode) { - // Add existing tags from the input field. - var node = $(this.options.singleFieldNode); - var tags = node.val().split(this.options.singleFieldDelimiter); - node.val(''); - $.each(tags, function(index, tag) { - that.createTag(tag, null, true); - addedExistingFromSingleFieldNode = true; - }); - } else { - // Create our single field input after our list. + if(!this.options.singleFieldNode){ + // Create our single field input after our list. this.options.singleFieldNode = $(''); this.tagList.after(this.options.singleFieldNode); - } + } } - - // Add existing tags from the list, if any. - if (!addedExistingFromSingleFieldNode) { - this.tagList.children('li').each(function() { - if (!$(this).hasClass('tagit-new')) { - that.createTag($(this).text(), $(this).attr('class'), true); - $(this).remove(); - } - }); + + if(this.options.items){ + for (index = 0, len = this.options.items.length; index < len; ++index) { + this.createTag(this.options.items[index],null,true); + } } // Events. @@ -268,14 +256,20 @@ // Autocomplete will create its own tag from a selection and close automatically. if (!(that.options.autocomplete.autoFocus && that.tagInput.data('autocomplete-open'))) { that.tagInput.autocomplete('close'); - that.createTag(that._cleanedInput()); + that.createTag({ + label:that._cleanedInput(), + value:that._cleanedInput() + }); } } }).blur(function(e){ - // Create a tag when the element loses focus. + // Clean tag when the element loses focus. // If autocomplete is enabled and suggestion was clicked, don't add it. if (!that.tagInput.data('autocomplete-open')) { - that.createTag(that._cleanedInput()); + that.createTag({ + label:that._cleanedInput(), + value:that._cleanedInput() + }); } }); @@ -283,7 +277,7 @@ if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) { var autocompleteOptions = { select: function(event, ui) { - that.createTag(ui.item.value); + that.createTag(ui.item); // Preventing the tag input to be updated with the chosen value. return false; } @@ -436,21 +430,23 @@ return Boolean($.effects && ($.effects[name] || ($.effects.effect && $.effects.effect[name]))); }, - createTag: function(value, additionalClass, duringInitialization) { + createTag: function(item, additionalClass, duringInitialization) { var that = this; - value = $.trim(value); + if(typeof item === "string"){ + item = $.trim(item); + } if(this.options.preprocessTag) { - value = this.options.preprocessTag(value); + item = this.options.preprocessTag(item); } - if (value === '') { + if (!item || (!item.label && !item.value)) { return false; } - if (!this.options.allowDuplicates && !this._isNew(value)) { - var existingTag = this._findTagByLabel(value); + if (!this.options.allowDuplicates && !this._isNew(item.label || item.value || item)) { + var existingTag = this._findTagByLabel(item.label || item.value || item); if (this._trigger('onTagExists', null, { existingTag: existingTag, duringInitialization: duringInitialization @@ -467,7 +463,7 @@ return false; } - var label = $(this.options.onTagClicked ? '' : '').text(value); + var label = $(this.options.onTagClicked ? '' : '').text(item.label || item.value || item); // Create tag. var tag = $('
  • ') @@ -494,7 +490,7 @@ // Unless options.singleField is set, each tag has a hidden input field inline. if (!this.options.singleField) { - var escapedValue = label.html(); + var escapedValue = item.value || item.label || item; tag.append(''); } @@ -508,7 +504,7 @@ if (this.options.singleField) { var tags = this.assignedTags(); - tags.push(value); + tags.push(item.value || item.label || item); this._updateSingleTagsField(tags); } @@ -588,4 +584,3 @@ }); })(jQuery); - From fd5e0a8132f08bafa1e3a93590da7d281fbf994b Mon Sep 17 00:00:00 2001 From: vedatkilic Date: Tue, 18 Aug 2015 19:05:36 +0300 Subject: [PATCH 2/2] tag-it.js custom object support Custom object support added. Object properties can be determined with itemLabel and itemValue options parameters. Default tag-it support with
  • and input[value] are removed and and items option is set. --- js/tag-it.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/tag-it.js b/js/tag-it.js index 1e37be34..060debbb 100644 --- a/js/tag-it.js +++ b/js/tag-it.js @@ -466,7 +466,7 @@ var label = $(this.options.onTagClicked ? '' : '').text(item.label || item.value || item); // Create tag. - var tag = $('
  • ') + var tag = $('
  • ') .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all') .addClass(additionalClass) .append(label); @@ -541,7 +541,7 @@ if (this.options.singleField) { var tags = this.assignedTags(); - var removedTagLabel = this.tagLabel(tag); + var removedTagLabel = tag.data('value'); tags = $.grep(tags, function(el){ return el != removedTagLabel; });