tagsinput & typeahead: Cannot read property 'a

问题:

I keep getting this error when trying to use tagsinput & 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 the apply error after clicking on an item in the list. I also notice that the text I typed isn't removed. I have searched for other similar issues but didn't find a working answer.

note: I'm using this plugin for typeahead https://github.com/bassjobsen/Bootstrap-3-Typeahead and this plugin for tagsinput http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

回答1:

I guess, but am not sure, that there has been made a bootstrap-tagsinput update which somehow broke the way it treats the "old" bootstrap typeahead. I have found two bugs, but not tracked completely down why.

1'st issue
The error "Cannot read property 'apply' of undefined" is raised in typeahead and is caused by the typeahead trying to target a undefined value. The issue is here as well. I have made a pull request for this (click for details). Hopefully my suggestion will be merged, if not you can download this forked repo. The pull request is now merged into master.

2nd issue
When the nasty exception was history, I noticed that bootstrap-tagsinput not is cleaning up after a selection is made in the typeahead. The selection is made but the whole string or portions of the string remains in the input box. This can be solved by using a afterSelect handler :

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

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