集成bootstrap 3 typeahead和标签输入与对象作为标签

时间:2016-01-09 13:02:55

标签: twitter-bootstrap-3 bootstrap-typeahead bootstrap-tags-input

我无法将bootstrap 3 typeahead与标签输入集成,但将对象作为标签。如果我在输入字段上只使用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中选择一个建议的选项,则单击enter会提交整个表单,而不是仅仅接受该选项作为标记。

1 个答案:

答案 0 :(得分:9)

您应该通过typeahead选项将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