twitter-bootstrap - 如何在引导标签输入过滤器中允许逗号？

Question

我正在使用下面的代码使用引导标签输入过滤器提交标签，我想在标签中允许逗号。请帮忙。

$('.tagsinput').tagsinput({
        maxTags: 15,
        trimValue: true,
        confirmKeys: [13],
        allowDuplicates: false,
        onTagExists: function(item, $tag) {
            alert('Tag already exists')
            $tag.hide.fadeIn();
          }
    });

Answer 1

编辑

从最初写作的时候开始，看起来现在有两种选择：delimiter和delimiterRegex。所以你应该可以做.tagsinput({ delimiter: '|' })or .tagsinput({ delimiterRegex: /\s+/ })。默认仍然是,.

原帖

没有选择，因此您必须更改插件的代码。bootstrap-tagsinput.js 的第 87 行在字符上拆分,。您可以将其更改为不同的字符，例如;或|。如果您想让它更具扩展性，您可以添加splitOn: ','到defaultOptions，然后将第 87 行更改为var items = item.split(self.options.splitOn);。您也可以添加self.options.splitOn &&到if上面的语句中，这将防止它在没有什么可拆分的情况下尝试拆分。

因此，代码更改需要如下所示：

// Line 4
var defaultOptions = {
    splitOn: ','
    // ...
};

// Line 86
if (self.options.splitOn && typeof item === "string" && this.$element[0].tagName === 'INPUT') {
  var items = item.split(self.options.splitOn);
  // ...
}

你会想要继续使用confirmKeys: [ 13 ]，并且你可能想要使用 a<select multiple></select>而不是 an<input />以便在你这样做时得到一个数组而不是逗号分隔的字符串$(".tagsinput").val();

这是一个例子。

Answer 2

将您的标签添加为对象而不是字符串，例如：

el.tagsinput({
  itemValue: 'value',
  itemText: 'text',
  maxTags: 15,
  trimValue: false,
  //...
});

el.tagsinput('add', { "value": 1 , "text": "Tag 1," });
el.tagsinput('add', { "value": 2 , "text": "Tag 2," });
//...