I'm using Bootstrap 4, and Bootstrap Tags Input for making a multiple category selection option. I want to select multiple items only from the predefined categories listed in the predefined_list

Right now, whenever user type something in the input field the auto suggestion works(using the predefined_list) and user can see suggested relevant category tag and, add them.

However, user can also add new/custom arbitrary category tags by manually typing it. Say, user typed 'Apple' or 'Banana'. The category list gets submitted with the custom items too. I want user to be restricted from adding new/custom category and only select from the existing auto suggested category.

<div class="col-lg-12">
    <span class="pf-title">Categories</span>              
    <div class="pf-field no-margin">
        <input id="category-input" name="category" type="text" data-role="tagsinput">
    </div>
</div>

<script type="text/javascript">
    var predefined_list = ["Linux", "Mac", "Windows"]
    $('#category-input').tagsInput({
    'autoplete': {
    source: predefined_list
    },
    trimValue: true,
    });
</script>

I'm using Bootstrap 4, and Bootstrap Tags Input for making a multiple category selection option. I want to select multiple items only from the predefined categories listed in the predefined_list

Right now, whenever user type something in the input field the auto suggestion works(using the predefined_list) and user can see suggested relevant category tag and, add them.

However, user can also add new/custom arbitrary category tags by manually typing it. Say, user typed 'Apple' or 'Banana'. The category list gets submitted with the custom items too. I want user to be restricted from adding new/custom category and only select from the existing auto suggested category.

<div class="col-lg-12">
    <span class="pf-title">Categories</span>              
    <div class="pf-field no-margin">
        <input id="category-input" name="category" type="text" data-role="tagsinput">
    </div>
</div>

<script type="text/javascript">
    var predefined_list = ["Linux", "Mac", "Windows"]
    $('#category-input').tagsInput({
    'autoplete': {
    source: predefined_list
    },
    trimValue: true,
    });
</script>

• javascript
• jquery
• html
• bootstrap-4
• bootstrap-tags-input

• I checked the Bootstrap Tags Input and didn't find autoplete option in documentation, where did you get it? – John F Commented Feb 14 at 13:30

3 Answers 3

Just add freeInput: false in the options

<script type="text/javascript">
    var predefined_list = ["Linux", "Mac", "Windows"];
    $('#category-input').tagsInput({
        'autoplete': {
            source: predefined_list
        },
        freeInput: false,
        trimValue: true,
    });
</script>

Have a look at the Eventlisteners in the examples https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

ES6:

$('#category-input').on('beforeItemAdd', (event) => {
  if(!predefined_list.includes(event.item)) {
     event.cancel = true;
  }
});

ES5:

$('#category-input').on('beforeItemAdd', function(event) {
  if(predefined_list.indexOf(event.item) === -1) {
     event.cancel = true;
  }
});

1. Start Eventlistener which catches the event "before item gets added"
2. If predefined_list doesn't include the item added set the cancel variable to true so it doesn't get added
3. Exists since ES6. ES5 works with indexOf (which returns -1 if there is no match)

$('input').tagsinput('add', 'Linux', 'Mac', 'Windows');

$('input').tagsinput('remove', 'Linux', 'Mac');

$('input').tagsinput('removeAll');