typeahead.js - ember-cli typeahead causes errors inside ember.js

Question

installed type-ahead component from bower.

and try to use

{{type-ahead data=companies name="name" selection=selectedCompany}}

component in action. it causes errors inside ember.js (_changeSingle and afterFunc functions)

"Uncaught TypeError: Cannot read property 'selectedIndex' of undefined "

Uncaught TypeError: Cannot read property 'nextSibling' of null

is it for versions?

Answer 1

Here is my own typeahead ember component:

Component

App.XTypeaheadComponent = Ember.Component.extend({
  suggestionEngine: null,
  data: null,
  name: null,
  selection: null,

  init: function () {
    var self = this;
    this._super();

    this.suggestionEngine = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace(self.name),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: this.data
    });    
    this.suggestionEngine.initialize();
  },  

  didInsertElement: function () {
    this.$('#typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    }, {
      name: 'name',
      displayKey: this.name,
      source: this.suggestionEngine.ttAdapter()
    });

    this.$().on('typeahead:selected', function (obj, dat, name) {
      this.set('selection', dat);
    }.bind(this));
  },

  willDestroyElement: function () {
    this.$('#typeahead').typeahead('destroy');
  }
});

Components Template

<script type="text/x-handlebars" data-template-name="components/x-typeahead">
  {{input type='text' id='typeahead'}}
</script>

In Action:

http://emberjs.jsbin.com/vetaro/3/edit

No styling included