6

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.

davidkonrad
  • 77,311
  • 15
  • 189
  • 243
Mario Plantosar
  • 766
  • 9
  • 21

1 Answers1

10

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.

Community
  • 1
  • 1
davidkonrad
  • 77,311
  • 15
  • 189
  • 243
  • 2
    @Mario_Plantosar Wonder why this answer wasn't accepted. – Janaka R Rajapaksha Aug 29 '16 at 04:34
  • 1
    Well this is quite different from the docs, but very glad you posted this. – MeanGreen Dec 28 '16 at 09:57
  • After selecting an option and removing it from tags input . it won't give access to create Tags input on free text entered while pressing tab or on mouse click event. Kindly give solution . – Saurabh Mehta Mar 03 '17 at 05:58
  • hey @SaurabhMehta, Thanks for the reply. Really cant help out of a vague description :) What version? What are you doing specifically, i.e the code and more. Can you reproduce the behaviour in a fiddle? I think you might be better off asking a new question with relevant code and a demonstrating example. Or perhaps, if you are convinced it is a bug, go directly and raise an issue at https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues ..? – davidkonrad Mar 03 '17 at 11:24