Bootstrap 标签输入错误，无法设置文本框的值

Question

我正在尝试制作一个允许用户创建标签的输入区域。我发现 bootstrap 标签输入并尝试使用它。它有效，但是当我尝试在输入字段中设置数据时，它根本不起作用。这是我的代码：

 <input id="tagsdata" type="text" class="form-control" data-role="tagsinput"  placeholder="Add tags"/>


  $('#tagsdata').val(response.data.tags); // response.data.tags is a string which can be say :  "tags" or "tag1,tag2,tag3" etc. on pageload.

我已经在 cshtml 文件中包含了所有必需的脚本。

<script src="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>    
<link href="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" />
<link href="~/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput-typeahead.css" rel="stylesheet" />

（我没有遗漏什么，对吧？）

还有如何自定义标签输入区域？目前标签带有蓝色背景。请帮忙。

Answer 1

感谢您调查这个问题，但我有办法做到这一点..

var temp = response.data.tags.split(",");
            for (var i = 0; i < temp.length; i++)
            {
                $('#tagsdata').tagsinput('add', temp[i]);
            }

Answer 2

要添加您需要使用的项目：

$('#tagsdata').tagsinput('add', 'some tag');

所以如果你需要多个，你可以循环并一个一个地添加。这里有很多例子可以帮助你：https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

你给出不同的 class 取决于属性这里是来自网站的工作示例：

<script>
var elt = $('#tagsdata');
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>

Bootstrap 标签输入错误，无法设置文本框的值

Bootstrap Tags Input error,Unable to set value of textbox using

angularjs

bootstrap-tags-input