当我在标签输入中预填充值时，未创建新标签 - Bootstrap 标签输入

Question

在产品编辑页面中，我正在尝试选择（预输入）旧数据，并且工作正常。但我无法添加新标签。当我输入输入后按回车键或 space 时，标签没有填充。但可以删除现有标签。请帮助我

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 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>

图片

Answer 1

您预先输入的数据是对象数据。 { "value": 1 , "text": "Amsterdam" , "continent": "Europe" }

当您在输入中键入时，它是字符串值，而不是对象类型。在 tagsinput 中有 itemValue 选项的情况下，它不接受字符串数据。您可以使用 onchange 事件获取您输入的文本，并可以使用 add 方法添加您正在查找的数据。

我在这里为您编写了示例代码。

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>

这段代码只是为了向您展示它是如何工作的。如果您有任何问题，请发表评论。

当我在标签输入中预填充值时，未创建新标签 - Bootstrap 标签输入

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

html

javascript

css

jquery

bootstrap-4