Bootstrap 标签输入无效

Question

我正在尝试使用 bootstrap 来掌握标签输入功能，但显然遗漏了一些东西！我尝试严格按照文档进行操作，但未能使其正常工作——输入始终只显示为值列表，而不是标签。因此，我尝试复制一个明显有效的 JS fiddle 示例，但是当我将代码复制到我的代码编辑器时，同样的事情发生了。我相信我已经包含了对所需库的所有引用，但显然做错了什么。这是我的测试代码：

$(document).ready(function() {
  $('#defaultForm')
    .find('[name="cities"]')
    // Revalidate the color when it is changed
    .change(function(e) {
      console.warn($('[name="cities"]').val());
      console.info($('#aa').val());
      console.info($("#aa").tagsinput('items'));
      var a = $("#aa").tagsinput('items');
      console.log(typeof(a));
      console.log(a.length);
      $('#defaultForm').bootstrapValidator('revalidateField', 'cities');
    })
    .end()
    .find('[name="cities1"]')
    // Revalidate the color when it is changed
    .change(function(e) {
      console.warn($('[name="cities1"]').val());
      console.info($('#aa1').val());
      console.info($("#aa1").tagsinput('items'));
      var a = $("#aa1").tagsinput('items');
      console.log(typeof(a));
      console.log(a.length);
      $('#defaultForm').bootstrapValidator('revalidateField', 'cities1');
    })
    .end()
    .bootstrapValidator({
      excluded: ':disabled',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        cities: {
          validators: {
            notEmpty: {
              message: 'Please enter at least one city you like the most'
            }
          }
        },
        cities1: {
          validators: {
            callback: {
              message: 'Please choose 2-4 color you like most',
              callback: function(value, validator) {
                // Get the selected options
                var options = validator.getFieldElements('cities1').tagsinput('items');
                // console.info(options);
                return (options !== null && options.length >= 2 && options.length <= 4);
              }
            }
          }
        }
      }
    })
    .on('success.form.bv', function(e) {
      // Prevent form submission
      e.preventDefault();
    });
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>



<form id="defaultForm" method="post" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-3 control-label">Cities</label>
    <div class="col-lg-5">
      <input type="text" name="cities" id="aa" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Cities 1</label>
    <div class="col-lg-5">
      <input type="text" name="cities1" id="aa1" class="form-control" value="Amsterdam1,Washington1,Sydney1,Beijing1,Cairo1" data-role="tagsinput" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-5 col-lg-offset-3">
      <button type="submit" class="btn btn-default">Validate</button>
    </div>
  </div>
</form>

任何指点将不胜感激，因为这让我发疯！！！

Answer 1

I believe I have included all the references to the required libraries but clearly doing something wrong.

第一部分不正确，第二部分正确。

您还没有添加对 libraries 的所有引用，因为您缺少主要的

jquery 所有脚本都依赖的库。
我看到您正在使用带下拉菜单的 bootstrap，它们需要 popper.js 才能正常工作，如果您在 console 中注意到按 F12，您将收到错误

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

所以你应该在期望它正常工作之前包含所有依赖项，并且为了包含来自 CDN link 的 popper，除了 umd 版本之外不要包含任何其他版本使用 CDN link 其他版本有问题见 here，你应该按以下顺序加载你的脚本，它会工作

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>

Bootstrap 标签输入无效

Tags input with Bootstrap not working

javascript

tags

jquery

twitter-bootstrap

bootstrap-tags-input