引导标签输入不起作用答案

【问题标题】：Bootstrap tagsinput not working引导标签输入不起作用
【发布时间】：2017-03-15 17:15:39
【问题描述】：

我刚刚遇到了 Bootstrap tagsinput，我正在尝试它，但我似乎无法让它工作。

我在布局顶部添加了以下内容：

<link rel="stylesheet" href="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.css">

我在布局的底部添加了以下内容：

<script src="~/Scripts/bootstrap_tagsinput/bootstrap-tagsinput.js"></script>

然后在我的部分页面中添加了以下内容：

<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">

下面是正在发生的事情的图片，而不是显示的标签：

据我了解，这应该可行。我错过了什么？

【问题讨论】：

也许不是所有的资源（脚本或 css 文件）都可以在您的网络服务器上找到。尝试通过在 Chrome 中按 Ctrl+Shift+I 来检查页面
似乎是什么问题。？输入框不出现？错误？你能提供一个说明问题的jsfiddle或图片吗
我添加了一张正在发生的图片。
请给你页面的链接
我很乐意，但不幸的是，这是在我的本地。

标签： css twitter-bootstrap bootstrap-tags-input

【解决方案1】：

你有没有像

那样初始化你的输入

$('input').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

【讨论】：

我之前试过 $('#tags').tagsInput();并在上面尝试了您的建议，但没有区别:(

【解决方案2】：

在您的页面中添加此链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

演示

Bootstrap - tagsinput，Github - Reference

【讨论】：

您的演示正是我想要的...我尝试将它们放在我的 PartialView 中，但没有成功。我也尝试将它放在我的布局中，但它也没有工作......
我收回我之前的声明。我在你的演示中使用了这些例子，我得到了它的工作！不知道我之前做错了什么，但我显然做了一些导致它不起作用的事情。谢谢！！
@Daniel J Abraham 在添加标签后如何自动删除逗号？

【解决方案3】：

我认为因为它是一个局部视图并且它在库加载后出现，所以它没有被应用。

我遇到了完全相同的问题。我的索引页面包含所有库，但部分视图从未使用它们。

我必须将它添加到局部视图 Razor 以强制它在加载后应用。

<script>
    $(function () {
        $('input[data-role=tagsinput]').tagsinput();
    }
    );
</script>

【讨论】：