'Bootstrap-TagsInput confirmKeys don't work

I can't get the default Bootstrap-TagsInput confirmKeys, namely enter = 13 or comma = 188, to work out of the box. This is true with or without Typeahead.js. Confirm keys allow you to create a tag by clicking that key.

I think the issue is whether or not the tags are strings or objects. If you look at the Tagsinput demo, the "Typeahead" example allows tag creation with the default confirmKeys, enter or comma, but the "Objects as Tags" example right below it does not.

Any idea how to make the confirmKeys work with object tags?

javascriptjqueryhtmltypeahead.jsbootstrap-tags-input


Solution 1:[1]

For me the solutions was have freeInput in the configuration, e.g.

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

And in the tagsinput source code change the following to false.

cancelConfirmKeysOnEmpty: false,

This is on line 24 for me.

Solution 2:[2]

Year 2022, Bootstrap version 2.3.1:

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

put this code:

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

inside the <script>, but outside $(document).ready({...

Keys: 13 - Enter; 44 - comma; 32 - spacebar.

You shuold also change $('input') to $('your_input_class_or_id') and don't forget # or . at the start $('#your_... or $('.your_...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kohjah Breese
Solution 2 Monset

Related Questions