When working on the Product Edit Page, I successfully displayed the old data that was selected previously. However, I am facing an issue with adding new tags. The new tags do not appear when I press enter or space after typing in the input field. It is possible to remove existing tags though. Can someone please assist me with this?
HTML
<div class="col-md-6 tags">
<div class="form-group">
<label class="lbl" for="">Tags</label>
<input class="form-control tt-input" type="text" name="tags" data-role="tagsinput" id="tags" >
</div>
</div>
SCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"
crossorigin="anonymous"></script>
<script>
var elt = $('#tags');
elt.tagsinput({
tagClass: function(item) {
switch (item.continent) {
case 'Europe' : return 'label label-primary';
case 'America' : return 'label label-danger label-important';
case 'Australia': return 'label label-success';
case 'Africa' : return 'label label-default';
case 'Asia' : return 'label label-warning';
}
},
itemValue: 'value',
itemText: 'text',
});
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });
elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });
</script>
Image