'When i pre filled value in tags input , New tags not creating - Bootstrap Tag Input

In Product Edit Page i am trying to make selected (pre input) old data, and it is working fine. but i can't add new tags. Tags are not populating when i hit enter or space after typing in input. but existing tag removal is possible. Please help me

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

enter image description here

javascripthtmljquerycssbootstrap-4


Solution 1:[1]

Your pre input data is Object data. { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }

When you type in the input, it's String value, not Object type. In the case of having itemValue option in tagsinput, it doesn't accept String data. You can use onchange event to get the text you typed in and can add data what you are looking by using add method.

I wrote my example code for you here.

const preData = [{
    value: 1,
    text: "Amsterdam",
    continent: "Europe"
  },
  {
    value: 4,
    text: "Washington",
    continent: "America"
  },
  {
    value: 7,
    text: "Sydney",
    continent: "Australia"
  },
  {
    value: 10,
    text: "Beijing",
    continent: "Asia"
  },
  {
    value: 13,
    text: "Cairo",
    continent: "Africa"
  }
];
let elt = $('#tags');
$(elt).tagsinput({
  tagClass: (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';
      default:
        return 'label label-danger';
    }
  },
  itemValue: "value",
  itemText: "text",
})
$(document).ready(() => {

  preData.map((val, index) => {
    $(elt).tagsinput('add', val);
  })

  var realInputForTags = $('#tags').tagsinput('input');
  $(realInputForTags).change((e) => {
    // you need to customize value, continent value according to your requirements
    let newItem = {
      value: Math.random(),
      text: e.target.value,
      continent: "xxx continent"
    }
    $(elt).tagsinput('add', newItem);
    e.target.value = "";
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" integrity="sha512-wu4jn1tktzX0SHl5qNLDtx1uRPSj+pm9dDgqsrYUS16AqwzfdEmh1JR8IQL7h+phL/EAHpbBkISl5HXiZqxBlQ==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />




<div class="col-md-6 tags">
  <div class="form-group" id="tagsInputDiv">
    <label class="lbl" for="">Tags</label>
    <input class="form-control tt-input" type="text" name="tags" data-role="tagsinput" id="tags" />
  </div>
</div>

This code is the one just to show you how it works. If you have any question, leave a comment.

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

Related Questions