Bootstrap-TagsInput 确认键不起作用答案

【问题标题】：Bootstrap-TagsInput confirmKeys don't workBootstrap-TagsInput 确认键不起作用
【发布时间】：2015-12-24 14:29:52
【问题描述】：

我无法获得默认的 Bootstrap-TagsInput confirmKeys，即 enter = 13 或 comma = 188，开箱即用。无论有没有Typeahead.js，都是如此。确认键允许您通过单击该键来创建标签。

我认为问题在于标签是字符串还是对象。如果您查看the Tagsinput demo，“Typeahead”示例允许使用默认的confirmKeys、enter 或comma 创建标签，但其下方的“对象作为标签”示例不允许。

知道如何使confirmKeys 与对象标签一起使用吗？

【问题讨论】：

标签： javascript jquery html typeahead.js bootstrap-tags-input

【解决方案1】：

我必须编辑 Bootstrap-tagsinput 库才能完成这项工作。

这是我在库中添加/注释的内容：

 //self.options.freeInput = false; //notice commented out

//... (lots of lines between)

if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
    // Only attempt to add a tag if there is data in the field

    if (text.length !== 0) {
       //<<<<< BEGIN code block added
       //self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text); //notice commented out

       var item2 = self.$input.val();
       if (self.objectItems) {
         var beforeFreeInputItemAdd = $.Event('beforeFreeInputItemAdd', { item: item2, cancel: true });
         self.$element.trigger(beforeFreeInputItemAdd);
         if (beforeFreeInputItemAdd.cancel)
           return;

         item2 = beforeFreeInputItemAdd.item;
       }

       self.add(item2);
       self.$input.val(''); 
       //  $input.val(''); //>>>>>> END code block added
    }

}

然后在代码库中任何想要使用这个库修改的地方，我添加了这个：

var id_increment = 1;
$("#my-tagsinput-field").on('beforeFreeInputItemAdd', function(event) {

    event.item = {'name': event.item, 'id': 'new-'+id_increment};
    event.cancel = false;
    id_increment++;

});

【讨论】：

感谢蒂姆，您所做的更改已生效，但目前尚未记录。
从头开始，一旦合并它们就会被覆盖，除非我是一个假人并且无法使其工作。 :( 会很棒的。
event.item = {'name': event.item, 'id': 'new-'+id_increment}; -> 我认为这不合适，因为您将对象添加到 name 属性。这将使 tagsinput 在您的输入中显示一个 [Object object] 标签。

【解决方案2】：

对我来说，解决方案是在配置中有 freeInput，例如

$( 'input[type="tags"]' ).tagsinput(
{
    typeaheadjs: [{
        minLength: 1,
        highlight: true
    },
    {
        limit: 99,
        name: type,
        displayKey: 1,
        valueKey: 'name',
        source: sourcefunc,
        templates: { suggestion: suggestionsfunc }
    }],
    freeInput: true
});

并在tagsinput源代码中将以下内容更改为false。

cancelConfirmKeysOnEmpty: false,

我在第 24 行。

【讨论】：

【解决方案3】：

2022 年，Bootstrap 版本 2.3.1：

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

输入这段代码：

$('input').tagsinput({
  confirmKeys: [13, 44, 32]
});

在<script> 内部，但在$(document).ready({... 外部

键：13 - 输入； 44 - 逗号； 32 - 空格键。

您还应该将$('input') 更改为$('your_input_class_or_id') 并且不要忘记# 或。在开头$('#your_... 或$('.your_...

【讨论】：