Tagsinput & typeahead: Unable to read the "apply" property from undefined

Question

I keep getting this error while trying to use tagsinput and typeahead.

HTML:

<section id="examples"> <div class="example example_typeahead"> <h3>Typeahead</h3> <div class="bs-example"> <input class="testing" type="text" value="nope" /> </div> </div> </section> 

JavaScript:

 var data = ['yes', 'yesyes', 'no', 'nope', 'yes again'], elt = $('.testing'); elt.tagsinput({ typeahead: { source: data }, }); 

I get an error after clicking on an item in the list. I also notice that the text I typed is not deleted. I looked for other similar problems, but did not find a working answer.

Note: I use this plugin for typeahead https://github.com/bassjobsen/Bootstrap-3-Typeahead and this plugin for taginput http://bootstrap-tagsinput.imtqy.com/bootstrap-tagsinput/examples/

Answer 1

I guess, but not sure, an update was made to bootstrap-tagsinput, which somehow violated the way the "old" type bootstrap is handled. I found two errors, but did not fully track why.

1st issue
The error "Unable to read the apply property from undefined" occurs in typeahead and is caused by typeahead, which is trying to set the value to undefined. The problem is here . I made a tensile request for this (click for more information). I hope my offer will be combined if you can not download this branched repo. The pull request is now merged into master.

Second problem
When the unpleasant exception was history, I noticed that bootstrap-tagsinput is not cleared after the selection is made in typeahead. Selected, but the entire line or parts of the line remain in the input field. This can be solved using the afterSelect handler:

 $('#someElement').tagsinput({ typeahead: { source: data, afterSelect: function() { this.$element[0].value = ''; } } }) 

With these two changes, bootstrap-tagsinput and boostrap3-typeahead work as expected. See Demo -> http://jsfiddle.net/bao3vk2m/