5

我在将引导程序3 typeahead与标签输入但将对象作为标签进行集成时遇到问题。它的工作原理是,如果我在输入字段中只使用typeahead,但如果我将它与标记输入集成在一起,那么它不起作用,我甚至不会收到任何真正令人沮丧的错误。这是我的代码:集成引导程序3 typeahead和标签输入与对象作为标签

var places = [{name: "New York"}, {name: "Los Angeles"}]; 
//this works 
$('input').typeahead({ 
    source: places 
}); 

//this doesn't 
$('input').tagsinput({ 
    freeInput: false, 
    confirmKeys: [44], 
    typeahead: { 
     source: places 
    } 
}); 

我做错了什么或这是一个错误?

如果有人有一个这样的工作示例我真的很感谢一些帮助,它可以是typeahead.js而不是bootstrap 3 typeahead,我试图使用它以及它的工作原理,但然后我有一个问题,如果如果我从typeahead中选择一个建议的选项,点击输入提交整个表单,而不是只接受该选项作为标记。

回答

6

您应该通过typeahead选项将打印头附加到tagsinput上!这很容易(和什么docs suggests)。然后,如果你map()places到字符串数组它的工作原理:

$('.tagsinput-typeahead').tagsinput({ 
    // other tagsinput options here 
    typeahead: { 
    source: places.map(function(item) { return item.name }), 
    afterSelect: function() { 
     this.$element[0].value = ''; 
    } 
    } 
}) 

演示 - >http://jsfiddle.net/gm3a1s9k/1/

通知的afterSelect()it is needed in order to clear the input

+2

@Mario_Plantosar不知道为什么这个答案不被接受。 –

+1

这和文档有很大不同,但是很高兴你发布了这个。 – MeanGreen

+0

选择一个选项并将其从标签输入中删除后。它不会授予在按Tab或点击鼠标事件时输入在自由文本上输入的标签输入的权限。请给解决办法。 –