(function ($) { "use strict"; var defaultOptions = { tagClass: function(item) { return 'label label-info'; }, itemValue: function(item) { return item ? item.toString() : item; }, itemText: function(item) { return this.itemValue(item); }, freeInput: true, addOnBlur: true, maxTags: undefined, maxChars: undefined, confirmKeys: [13, 44], onTagExists: function(item, $tag) { $tag.hide().fadeIn(); }, trimValue: false, allowDuplicates: false }; /** * Constructor function */ function TagsInput(element, options) { this.itemsArray = []; this.$element = $(element); this.$element.hide(); this.isSelect = (element.tagName === 'SELECT'); this.multiple = (this.isSelect && element.hasAttribute('multiple')); this.objectItems = options && options.itemValue; this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : ''; this.inputSize = Math.max(1, this.placeholderText.length); this.$container = $('
'); this.$input = $('').appendTo(this.$container); this.$element.after(this.$container); var inputWidth = (this.inputSize < 3 ? 3 : this.inputSize) + "em"; this.$input.get(0).style.cssText = "width: " + inputWidth + " !important;"; this.build(options); } TagsInput.prototype = { constructor: TagsInput, /** * Adds the given item as a new tag. Pass true to dontPushVal to prevent * updating the elements val() */ add: function(item, dontPushVal) { var self = this; if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags) return; // Ignore falsey values, except false if (item !== false && !item) return; // Trim value if (typeof item === "string" && self.options.trimValue) { item = $.trim(item); } // Throw an error when trying to add an object while the itemValue option was not set if (typeof item === "object" && !self.objectItems) throw("Can't add objects when itemValue option is not set"); // Ignore strings only containg whitespace if (item.toString().match(/^\s*$/)) return; // If SELECT but not multiple, remove current tag if (self.isSelect && !self.multiple && self.itemsArray.length > 0) self.remove(self.itemsArray[0]); if (typeof item === "string" && this.$element[0].tagName === 'INPUT') { var items = item.split(','); if (items.length > 1) { for (var i = 0; i < items.length; i++) { this.add(items[i], true); } if (!dontPushVal) self.pushVal(); return; } } var itemValue = self.options.itemValue(item), itemText = self.options.itemText(item), tagClass = self.options.tagClass(item); // Ignore items allready added var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0]; if (existing && !self.options.allowDuplicates) { // Invoke onTagExists if (self.options.onTagExists) { var $existingTag = $(".tag", self.$container).filter(function() { return $(this).data("item") === existing; }); self.options.onTagExists(item, $existingTag); } return; } // if length greater than limit if (self.items().toString().length + item.length + 1 > self.options.maxInputLength) return; // raise beforeItemAdd arg var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false }); self.$element.trigger(beforeItemAddEvent); if (beforeItemAddEvent.cancel) return; // register item in internal array and map self.itemsArray.push(item); // add a tag element var $tag = $('' + htmlEncode(itemText) + ''); $tag.data('item', item); self.findInputWrapper().before($tag); $tag.after(' '); // add