标签: bootstrap-tags-input

我试图在包含在这样的模态中的表单中使用bootstrap tagsinput

...
<div class="form-group">
                            <label for="myTagLabel">Tags:</label> 
                            <input class="form-control" id="myTag"  type="text" data-role="tagsinput">
                        </div>

正如您在上图中看到的那样,我看不出为什么输入没有包含表单的宽度.

更新 此http://www.bootply.com/f43d1A0YxK再现该问题

我正在使用带有typeahead的Bootstrap标签输入,我想知道如何设置typeaheadjs的默认选项.在示例中,我看到过这样的事情:

var input = $('input');
input.tagsinput({
    itemValue: 'value',
    itemText: 'text',
    typeaheadjs: {
        name: 'engine',
        displayKey: 'text',
        source: engine.ttAdapter()
}

这里,typeaheadjs表示数据集,但是如何添加提示,高亮,minLength等基本选项？

我正在使用Bootstrap Tags Input

我正在尝试动态添加标签.

$('.div-tag').tagsinput('add', 'vino');

上面的代码工作正常,但是当我尝试以下代码时:

$('.div-tag').tagsinput('add', { id: 1, text: 'some tag' });

我收到错误:

Uncaught Can't add objects when itemValue option is not set

请帮我添加id和值的标签.

我有这个输入使用bootstrap-tagsinputs插件,问题是我希望它自动完成标签,它没有这样做!

标签部分工作完美;)但自动完成部分不:(

任何人都知道为什么？,示例与插件页面中的示例相同:

http://timschlechter.github.io/bootstrap-tagsinput/examples/

这是我的代码:

<input id="tags-text-input"></input>

$("#tags-text-input").ready(function () {
            $("#tags-text-input").tagsinput();
            $("#tags-text-input").typeahead({
                typeahead: ["I'm done trying...", "Jhon", "Smith"]
            });
        });

我已经包含了typeahead插件和tagsinput插件.我做错了什么？

提前致谢.

我使用下面的代码使用bootstrap标签输入过滤器提交标签,我想在标签中允许使用逗号.请帮忙.

$('.tagsinput').tagsinput({
        maxTags: 15,
        trimValue: true,
        confirmKeys: [13],
        allowDuplicates: false,
        onTagExists: function(item, $tag) {
            alert('Tag already exists')
            $tag.hide.fadeIn();
          }
    });

我试图使用没有Typeahead的Bootstrap标签输入插件.我已经包含以下文件:

<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
<script src="../../tagsinput/js/bootstrap-tagsinput.min.js"></script>

脚本如下:

<script>
    $('#tagPlaces').tagsinput({
        allowDuplicates: true
    });
</script>

使用插件的JSP表单的一部分:

<div class="form-group">
        <label for="tagPlaces" class="col-sm-2 control-label">Tag Places</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" data-role="tagsinput" id="tagPlaces">
        </div>
</div>

但我无法在输入字段中看到标签.当我按下输入标签时,我的表单也会被提交.请提出我缺少的内容以及使用该插件的正确方法.

我正在尝试在Angular2项目中使用bootstrap-tagsinput库.使用package.jsonfile 安装库:

  "dependencies": {
    ...
    "bootstrap-tagsinput": "^0.7.1",
    ...
  }

现在我有一个bootstrap-tagsinput文件夹node_modules.我想在特定组件中使用tagsinput.我看到目录中有一个bootstrap-tagsinput-angular.js文件node_modules/bootstrap-tagsinput/dist,但我无法正常使用它.

我应该在index.html中添加JS文件,以便bootstrap-tagsinput可用于所有组件吗？或者有没有办法在需要的地方导入它？

换句话说,有没有办法做这样的事情:

mycomponent.component.html:

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"/>

mycomponent.component.ts:

import {Component, AfterViewInit} from '@angular/core';
import {TagsInputComponents} from 'bootstrap-tagsinput'; // Something like that?!?

@Component({
    ...
})

export class MyComponentComponent implements AfterViewInit {

    ngAfterViewInit():any {
        $('input').tagsinput('refresh');
    }
}

非常感谢你的帮助!

我正在尝试使用Bootstrap 3和Bootstrap Tags Input并输入typeahead,但它不会在输入中显示标签.

很难解释......最好在jsfiddle中看到:https://jsfiddle.net/claudiosw/5cww4fcg/3/

我试过使用typeahead.js但结果是一样的.

这是代码:

<input type="text" class="form-control" rows="3" value="Test1,Test2" data-role="tagsinput" />


<script>
  $(document).ready(function() { 

      $('input').tagsinput({
        typeahead: {
          source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
      });
  });
</script>

提前致谢!

编辑:添加工作JSFiddle

我正在使用Twitter Bootstrap TagsInput和Bootstrap Typeahead.我的源代码是一个json文件,但这是无关紧要的,我已经用静态源检查了.

typeahead和tagsinput正在工作,但是当我按下enter,tab或单击标签时,它会创建一个完整的副本.

每当我按Enter键或完成预先输入时,就会发生这种极端'默认'.如果我通过用逗号分隔来打破预先输入,或者将焦点从窗口移开,则不会发生.

这是输入:

<input id="itemCategory" type="text" autocomplete="off" class="tagsInput form-control" name="itemCategory">

以下是脚本:

    <script>                        
        $('.tagsInput').tagsinput({
            confirmKeys: [13, 44],
            maxTags: 1,
          typeahead: {                  
            source: function(query) {
              return $.get('listcategories.php');
            }
          }
        });
    </script>

我确信这是不可重复的东西,运气不好,所以我希望有人会有一些他们知道可能导致类似事情发生的机构知识.

这是dev中额外文本的图像.工具:

我真的很感激任何建议或意见.谢谢.

工作代码

感谢@Girish,以下是"解决"这个问题的原因.我认为这是一个时间错误,在更新版本的jQuery或Typeahead中引入.这段代码只是手动删除额外的元素,虽然希望有一些东西可以防止它被放在那里,从而消除了额外的代码.现在它对我有用.

        $('.tagsInput').tagsinput({
            confirmKeys: [13, 44],
            maxTags: 1,
          typeahead: {                  
            source: function(query) {
              return $.get('tags.php');
            }
          }
        });
        $('.tagsInput').on('itemAdded', function(event) {
            setTimeout(function(){
                $(">input[type=text]",".bootstrap-tagsinput").val("");
            }, 1);
        });

我已经看到这个问题Bootstrap tagsinput添加标签的id和值,但解决方案对我不起作用:

我发现的是,为了让输入框识别我输入的标签,我要么必须有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 …