Integrate bootstrap 3 typeahead and tags input with objects as tags

Question

I am having trouble integrating bootstrap 3 typeahead with tags input but with objects as tags. It works if I use only typeahead on input field, but if I integrate it with tags input then it doesn't work and I don't even get any errors which is really frustrating. Here's my code:

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

Am I doing something wrong or is this a bug?

If anyone has a working example of this I'd really appreciate some help, it can be typeahead.js instead of bootstrap 3 typeahead, I tried to use that as well and it works but then I have a problem where if I choose a suggested option from typeahead clicking enter submits the whole form instead of just accepting that option as a tag.

Answer 1

You should attach the typeahead to tagsinput via the typeahead option! This is much easier (and what the docs suggests). Then, if you map() places to an array of strings it works :

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

demo -> http://jsfiddle.net/gm3a1s9k/1/

Notice the afterSelect(), it is needed in order to clear the input.