带Bootstrap标签的Bootstrap 3输入和typeahead不显示输入内的标签

Question

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

提前致谢！

Answer 1

要修复它，请做两件事：

1. 要在输入中显示标记，请不要同时使用data-role="tagsinput"和tagsinput()。相反，只能在js中使用它来启动它。

2. 要在添加标记后清除明文，您应添加：

   afterSelect: function() {
       this.$element[0].value = "";
   }
   

   到tagsinput()选项。

查看更新的JSFiddle