Bootstrap标签输入无效

时间:2016-11-02 11:45:16

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

我刚刚遇到了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">

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

enter image description here

根据我的理解,这应该有效。我错过了什么?

3 个答案:

答案 0 :(得分:3)

认为,因为它是局部视图,并且在加载库后出现,所以不会被应用。

我有完全一样的问题。我的索引页面包含所有库,但部分视图从未使用过它们。

我必须将其添加到局部视图剃刀中,以使其在加载后应用。

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

答案 1 :(得分: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 - tagsinputGithub - Reference

答案 2 :(得分:0)

你是否初步确定了你的输入

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