Twitter Bootstrap 3 Typeahead/Tagsinput完成两次

Question

编辑:添加工作JSFiddle

我正在使用Twitter Bootstrap TagsInput和Bootstrap Typeahead.我的源代码是一个json文件,但这是无关紧要的,我已经用静态源检查了.

typeahead和tagsinput正在工作,但是当我按下enter,tab或单击标签时,它会创建一个完整的副本.

每当我按Enter键或完成预先输入时,就会发生这种极端'默认'.如果我通过用逗号分隔来打破预先输入,或者将焦点从窗口移开,则不会发生.

这是输入:

<input id="itemCategory" type="text" autocomplete="off" class="tagsInput form-control" name="itemCategory">

以下是脚本:

    <script>                        
        $('.tagsInput').tagsinput({
            confirmKeys: [13, 44],
            maxTags: 1,
          typeahead: {                  
            source: function(query) {
              return $.get('listcategories.php');
            }
          }
        });
    </script>

我确信这是不可重复的东西,运气不好,所以我希望有人会有一些他们知道可能导致类似事情发生的机构知识.

这是dev中额外文本的图像.工具:

我真的很感激任何建议或意见.谢谢.

工作代码

感谢@Girish,以下是"解决"这个问题的原因.我认为这是一个时间错误,在更新版本的jQuery或Typeahead中引入.这段代码只是手动删除额外的元素,虽然希望有一些东西可以防止它被放在那里,从而消除了额外的代码.现在它对我有用.

        $('.tagsInput').tagsinput({
            confirmKeys: [13, 44],
            maxTags: 1,
          typeahead: {                  
            source: function(query) {
              return $.get('tags.php');
            }
          }
        });
        $('.tagsInput').on('itemAdded', function(event) {
            setTimeout(function(){
                $(">input[type=text]",".bootstrap-tagsinput").val("");
            }, 1);
        });

Answer 1

我不确定这是看错了,函数内部没有自定义代码,但选择的标记在输入字段中重复,但您可以使用替代解决方案,itemAdded 事件从input字段中删除选定的值,请参阅下面的示例代码.

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: true
});
$('input').on('itemAdded', function(event) {
    setTimeout(function(){
        $(">input[type=text]",".bootstrap-tagsinput").val("");
    }, 1);
});

我也注意到输入字段是生成每个标记部分所以this或者event不能成为目标标记输入字段,由于动态生成输入字段,您还需要延迟选择输入元素来自<selector>

DEMO

UPDATE:$.get()函数是返回xhr对象而不是服务器响应,因此您需要add callback方法来获取AJAX响应,请参阅下面的示例代码.

$('.tagsInput').tagsinput({
      confirmKeys: [13, 44],
      maxTags: 1,
      typeahead: {                  
          source: function(query) {
            return $.get('listcategories.php').done(function(data){
              /*if you have add `content-type: application/json` in 
                server response then no need to parse JSON otherwise,
                you will need to parse response into JSON.*/
              return $.parseJSON(data);
            })
          }
      }
 });