使用引导标签输入工作答案

【问题标题】：Using Bootstrap Tags Input to work使用引导标签输入工作
【发布时间】：2014-08-13 18:09:33
【问题描述】：

我一直在尝试使用引导标签输入，例如此链接中的示例： http://timschlechter.github.io/bootstrap-tagsinput/examples/ 这是我的代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap Tags Input</title>

    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
   <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" /> -->
    <link rel="stylesheet" href="libs/bootstrap-tagsinput.css" />


  </head>

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

 <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="libs/bootstrap/js/bootstrap.min.js"></script>
     <script src="libs/bootstrap-tagsinput.js"></script>
     <script src="libs/bootstrap-tagsinput-angular.js"></script>
     <script src="libs/typeahead.bundle.js"></script>
  </body>

</html>

但代码似乎不起作用。关于如何完成这项工作的任何想法或想法？谢谢！

【问题讨论】：

它以什么方式“似乎不起作用”？
你能创建一个jsFiddle 来说明它为什么不起作用吗？
检查浏览器控制台是否有任何错误

标签： jquery twitter-bootstrap typeahead.js bootstrap-tags-input

【解决方案1】：

如果不查看您的 lib 文件夹中的内容，我们就不可能知道出了什么问题。

如果您为所有库使用适当的 CDN，那么一切都会正常工作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Bootstrap Tags Input</title>

  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
  <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />
</head>
<body>

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

  <script src="http://code.angularjs.org/1.2.15/angular.js" ></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <script src="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
  <script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput-angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
</body>
</html>

Demo in Plunker

也就是说，这里有很多相互冲突的库。您使用的是ng-tags-input 或bootstrap-tagsinput 还是bootstrap-tagsinput-angular？您应该选择一个并围绕它选择一个开发策略以避免冲突。

例如，这些是上面示例中实际使用的唯一libraries：

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>

【讨论】：