编辑：添加了
working 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,typeahead: {
source: function(query) {
return $.get('tags.PHP');
}
}
});
$('.tagsInput').on('itemAdded',function(event) {
setTimeout(function(){
$(">input[type=text]",".bootstrap-tagsinput").val("");
},1);
});
解决方法
我不确定这是错误,函数内部没有自定义代码,但是在输入字段中重复选择的标记,但是您可以使用替代解决方案,itemAdded事件从输入字段中删除选定的值,请参阅下面的示例代码.
$('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);
});
我还注意到输入字段正在生成每个标记部分,因此这个或事件不能成为目标标记输入字段,由于动态生成输入字段,您还需要延迟从< selector>中选择输入元素.
DEMO
更新：$.get()函数是返回xhr对象而不是服务器响应,因此需要添加回调方法来获取AJAX响应,请参阅下面的示例代码.
$('.tagsInput').tagsinput({
confirmKeys: [13,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);
})
}
}
});
