Question

我已经看到了这个问题Bootstrap tagsinput add tag with id and value，但解决方案对我不起作用：

我发现为了让输入框识别我输入的标签，我要么必须有data-role = tagsinput要么叫$（“input”）。tagsinsput（）。

例如。这适用于识别没有数据角色的标签：

$('#meeting-tags').tagsinput();
$('#meeting-tags').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

但这不是：

$('#meeting-tags').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

但是，如果我想通过javascript添加项目，那么只有当我既没有数据角色也没有初始调用时它才会起作用。错误是在未设置itemValue选项时无法添加对象

例如。这有效，但现在它无法识别标签：

$('#meeting-tags').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });
$('#meeting-tags').tagsinput('add', { id: 'tag id', label: 'tag lable' });

但这不是，但现在它再次识别标签：

$('#meeting-tags').tagsinput();
$('#meeting-tags').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });
$('#meeting-tags').tagsinput('add', { id: 'tag id', label: 'tag lable' });

肯定有一种方法可以识别标签并添加项目吗？

Answer 1

我找到了另一种解决方法。

搜索字符串＆＃34;当未设置itemValue选项时，无法添加对象＆＃34;进入tagsinput.js文件。你会在插件的add函数中找到它：

$ echo -n | git hash-object -t tree --stdin
4b825dc642cb6eb9a060e54bf8d69288fbee4904

我只是强制项目从对象到字符串：

// Throw an error when trying to add an object while the itemValue option was not set
  if (typeof item === "object" && !self.objectItems){
    throw("Can't add objects when itemValue option is not set");
  }

这似乎完美无缺:)。希望这有帮助。

Answer 2

初始化标签输入，如

 $('.div-tag').tagsinput({
      allowDuplicates: false,
        itemValue: 'id',  // this will be used to set id of tag
        itemText: 'label' // this will be used to set text of tag
    });

添加动态代码

$('.div-tag').tagsinput('add', { id: 'tag id', label: 'tag lable' });

就是这样;

Answer 3

来自tagsinput的de文档：仅当使用字符串作为标记时才可以这样做。设置itemValue选项时，将忽略此选项。

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Answer 4

您只需在输入标签中删除data-role。它将在具有实际选项的JavaScript之前初始化。

<input type="text" id="mytags" value=""

Answer 5

删除“ data-role =“ tagsinput””并按如下所示使用

      <input type="text" id="galleryTag" />'
      <script>
      var ele = $('#galleryTag');
      ele.tagsinput({
      allowDuplicates: false,
      itemValue: 'value',
      itemText: 'text'
         });
      ele.tagsinput('add',{ "value":1,"text":"Amsterdam"});
      ele.tagsinput('add',{ "value":4,"text":"Washington"});
      ele.tagsinput('add',{ "value":7,"text":"Sydney");
    </script>

Answer 6

我也遇到了这个问题，我按照以下步骤解决了这个问题。

初始化应该是正确的，在我的例子中，错误是我尝试了多次标记初始化。
仅初始化一次即可使用

不会再次初始化它，我发现主要问题是再次重复相同的代码。

我在这里分享我的代码

            
$('select#myId').tagsinput({
					  itemValue: 'value',
					  itemText: 'text',
					  tagClass: function(item) {
						    return ((item.removeDis && item.removeDis==true)  ? 'default-tag' : 'label-info');
						  }
				 });
         
  	$('select#myId').tagsinput('add',{
							'value' : somevalue,
							'text' : sometext,
							'removeDis' : true
						});

<select required class="form-control" id="myId"
					name="myId" multiple></select>

Answer 7

从element.ier中删除数据角色。删除此部分 data-role =“ tagsinput”

Answer 8

好的，所以我想这个想法。您必须在致电

时删除data-role="tagsinput"

$('.div-tag').tagsinput({
  allowDuplicates: false,
    itemValue: 'id',  // this will be used to set id of tag
    itemText: 'label' // this will be used to set text of tag
});

我认为这会产生冲突。所以从输入中删除data-role，然后像在Joe的回答中那样使用标记。

$('.div-tag').tagsinput('add', { id: 'tag id', label: 'tag lable' });

Bootstrap tagsinput未设置itemValue选项时无法添加对象

8 个答案: