Integrate bootstrap 3 typeahead and tags entered with objects as tags

Question

I am having trouble integrating bootstrap 3 typeahead with tag input but with objects as tags. It works if I use only typeahead in the input field, but if I integrate it with tag input, this will not work, and I don’t even get any errors that really upset. Here is 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 it a mistake?

If someone has a working example of this, I would really appreciate some help, it could be typeahead.js instead of bootstrap 3 typeahead, I tried to use this too, and it works, but then I have a problem if I select the suggested one an option from typeahead, by pressing the enter button, sends the entire form instead of just accepting this option as a tag.

Answer 1

You must attach typeahead to tags via the typeahead parameter! This is much simpler (and what docs offers). Then, if you map() places for 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/

Pay attention to afterSelect() to clear the input .