11

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

我发现为了让输入框识别我输入的标签，我要么必须拥有 data-role = tagsinput 要么调用 $("input").tagsinput()。

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

$('#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' });

肯定有一种既能识别标签又能添加项目的方法？

4

9 回答 9

12

我遇到了同样的问题（“itemValue not set”）并检查了插件，即使您初始化它，似乎也没有设置 tagsinput 的构造函数中的参数“options”。

/**
   * Constructor function
   */
  function TagsInput(element, options) {

我所做的是在标签中的数据角色定义旁边放置一个随机字符串，如下所示，强制它在选项参数中具有该值：

<input type="text" id="mytags" value="" data-role="tagsinput sometext" />

然后这样做：

var mytagsinput = $('#mytags');

//initialize
 mytagsinput.tagsinput({
              itemValue: 'id',
                itemText: 'text',
            });

//add my tags object
 mytagsinput.tagsinput('add', { id: 1, text: 'mytext'});

它对我有用。

于 2018-02-26T21:19:05.977 回答
4

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

在 tagsinput.js 文件中搜索字符串“Can't add objects when itemValue option is not set”。你会在插件的 add 函数中找到它：

// 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");
  }

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

// 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");
    item = $.trim(item.name);
  }

这似乎完美地工作:)。希望这有帮助。

于 2017-12-24T10:39:31.360 回答
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' });

而已;

于 2016-05-21T16:44:10.890 回答
1

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

<input type="text" id="mytags" value=""
于 2018-11-23T02:56:31.503 回答
0

我也遇到了这个问题，我按照这个程序解决了这个问题。

  1. 初始化应该是正确的，就我而言，错误是，我尝试了标签初始化的次数。

  2. 只有一次初始化 n 使用它

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

我在这里分享我的代码

            
$('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>

于 2020-06-11T14:36:54.933 回答
0

来自 tagsinput 的 de 文档：这只有在使用字符串作为标签时才有可能。设置 itemValue 选项时，该选项将被忽略。

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

于 2016-05-04T07:47:23.033 回答
-1

删除 '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>
于 2019-08-20T14:09:07.463 回答
-1

从 element.ieremove 这部分data-role="tagsinput" 中删除 data-role

于 2020-04-08T11:10:52.087 回答
-2

好的，所以我想出来了。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
});

我认为这会产生冲突。所以从输入中删除数据角色，然后使用乔的答案中的标签。

$('.div-tag').tagsinput('add', { id: 'tag id', label: 'tag lable' });
于 2017-01-16T23:05:22.423 回答