Twitter Bootstrap 3 Typeahead / Tagsinput完成两次

编辑:添加工作JSFiddle

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

在此处输入图像描述

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

在此处输入图像描述

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

这是输入:

 

以下是脚本:

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

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

这是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); }); 

我不确定这是错误,函数内部没有自定义代码,但是在输入字段中重复选择的标记 ,但是您可以使用替代解决方案, 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); }); 

我还注意到输入字段正在生成每个标记部分,因此thisevent不能成为目标标记输入字段,由于动态生成输入字段,您还需要延迟从选择输入元素

DEMO

更新$.get()函数是返回xhr对象而不是服务器响应,因此需要添加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); }) } } });