Bootstrap 4 tags input - Add tags only from the predefined list
13,462
Just add freeInput: false
in the options
<script type="text/javascript">
var predefined_list = ["Linux", "Mac", "Windows"];
$('#category-input').tagsInput({
'autocomplete': {
source: predefined_list
},
freeInput: false,
trimValue: true,
});
</script>
Author by
Wasi
Updated on June 05, 2022Comments
-
Wasi almost 2 years
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>