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

添加您需要使用的项目：

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

因此，如果您需要多个，您可以循环并逐个添加。以下是一些可以帮助您的示例：https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

你给了一个依赖于属性的不同类，这是来自网站的工作示例：

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

Answer 2

感谢您查看此问题，但我有办法这样做..

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

Bootstrap标签输入错误，无法使用

2 个答案: