Bootstrap 3 与 Bootstrap Tags Input 和 typeahead 不显示输入内的标签答案

【问题标题】：Bootstrap 3 with Bootstrap Tags Input and typeahead don't show the tags inside inputBootstrap 3 与 Bootstrap Tags Input 和 typeahead 不显示输入内的标签
【发布时间】：2017-09-02 22:00:59
【问题描述】：

我正在尝试将 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>

提前致谢！

【问题讨论】：

您能否准确解释您在输入输入时期望看到/发生的情况（以及您想要输入的内容）？
@ganders，就像 Jaqen 所做的那样。所以，这个问题似乎已经得到了回答。无论哪种方式都感谢尝试。

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

【解决方案1】：

要修复它做两件事：

要在输入中显示标签，不要同时使用data-role="tagsinput" 和tagsinput()。相反，只在 js 中初始化它。
要在添加标签后清除明文，您应该添加：
```
afterSelect: function() {
    this.$element[0].value = "";
}
```
到tagsinput() 选项。

查看更新的JSFiddle

【讨论】：