Bootstrap 4 tags input - Add tags only from the predefined list

Question

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({
    'autocomplete': {
    source: predefined_list
    },
    trimValue: true,
    });
</script>

Answer 1

Just add freeInput: false in the options

Categories

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