jquery - 引导标签输入允许重复

Question

我想允许在引导标签输入中重复。

<input type="text" id="y_data" name="y_data" data-provide="tag" placeholder="Add tags" />

我试图在存在时添加相同的标签，但它不起作用。

$(function () {
    $('#y_data').tagsinput({
        onTagExists: function(item, $tag) {
            $('#y_data').tagsinput('add', item);
        }
    });
});

是解决我的问题的正确方法还是任何其他解决方案。

Answer 1

只需将默认更改为allowDuplicates: true

https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/blob/master/src/bootstrap-tagsinput.js#L30

Answer 2

您需要从 bootstrap-tagsinput 插件中删除以下代码，

  // Ignore items allready added
      var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0];
      if (existing) {
        // Invoke onTagExists
        if (self.options.onTagExists) {
          var $existingTag = $(".tag", self.$container).filter(function() { return $(this).data("item") === existing; });
          self.options.onTagExists(item, $existingTag);
        }
        return;
      }

这是行https://github.com/TimSchlechter/bootstrap-tagsinput/blob/master/src/bootstrap-tagsinput.js#L91

但这不是个好主意，所以我为此提供了猴子补丁，

/**
   * HtmlEncodes the given value
   */

var htmlEncodeContainer = $('<div />');
  function htmlEncode(value) {
    if (value) {
      return htmlEncodeContainer.text(value).html();
    } else {
      return '';
    }
  }
   $.fn.tagsinput.Constructor.prototype.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;

      // 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) {
        // Invoke onTagExists
        if (self.options.onTagExists) {
          var $existingTag = $(".tag", self.$container).filter(function() { return $(this).data("item") === existing; });
          self.options.onTagExists(item, $existingTag);
        }

      }

      // register item in internal array and map
      self.itemsArray.push(item);

      // add a tag element
      var $tag = $('<span class="tag ' + htmlEncode(tagClass) + '">' + htmlEncode(itemText) + '<span data-role="remove"></span></span>');
      $tag.data('item', item);
      self.findInputWrapper().before($tag);
      $tag.after(' ');

      // add <option /> if item represents a value not present in one of the <select />'s options
      if (self.isSelect && !$('option[value="' + escape(itemValue) + '"]',self.$element)[0]) {
        var $option = $('<option selected>' + htmlEncode(itemText) + '</option>');
        $option.data('item', item);
        $option.attr('value', itemValue);
        self.$element.append($option);
      }

      if (!dontPushVal)
        self.pushVal();

      // Add class when reached maxTags
      if (self.options.maxTags === self.itemsArray.length)
        self.$container.addClass('bootstrap-tagsinput-max');

      self.$element.trigger($.Event('itemAdded', { item: item }));
    }

这是JsFiddle 演示

Answer 3

文档：http ://timschlechter.github.io/bootstrap-tagsinput/examples/

提取物：

尝试添加已经存在的项目时调用的函数。默认情况下，现有标签隐藏和淡入。

$('input').tagsinput({
  onTagExists: function(item, $tag) {
    $tag.hide.fadeIn();
  }
});

JS：所以你应该添加类似的东西：

$('input').tagsinput({
  onTagExists: function(item, $tag) {}
});