Typeahead Remote about ember-typeahead HOT 4 OPEN

var getDynamicData = function (key) {
    return function findMatches(q, cb) {
        var companyObjects = [];
        $.ajax({
            type: 'get',
            async: false,
            url: '/api/companies/' + q + '/search',
            contentType: "application/json; charset=utf-8"
        }).done(function (company) {
            $.each(company, function (i, obj) {
                var str = Em.isEmpty(obj.name) ? "" : obj.name;
                var currObj = { obj: obj };
                currObj[key] = str;
                companyObjects.push(currObj);
            });
            cb(companyObjects);
        });
    }
}

Em.TypeaheadComponent = Em.TextField.extend({
    highlight: false,
    hint: true,
    minLength: 1,
    autofocus: true,
    _typeahead: null,
    selection: null,
    didInsertElement: function () {
        this._super();
        this.initializeTypeahead();
        if (this.get('autofocus') === true) {
            this.$().focus();
        }
    },
    propertyDidChange: function () {
        window.alert('changed');
    },
    initializeTypeahead: function () {
        var that = this, t = null,
            options = {
                highlight: this.get('highlight'),
                hint: this.get('hint'),
                minLength: this.get('minLength')
            },
            dataset = this.get('dataset');
        t = this.$().typeahead(options, dataset);
        this.set('_typeahead', t);

        // Set selected object
        t.on('typeahead:selected', function (event, item) {
            Em.debug("Setting suggestion");
            that.set('selection', item.obj.id);
        });

        t.on('typeahead:autocompleted', function (event, item) {
            Em.debug("Setting suggestion");
            that.set('selection', item.obj.id);
        });
    },
    dataset: function () {
        var that = this, content = this.get('content');
        if (jQuery.isFunction(content)) {
            content.then(function (data) {
                return that.loadDataset(data);
            });
        } else {
            return this.loadDataset(content);
        }
    }.property(),
    loadDataset: function (content) {
        var name = this.get('name') || 'default',
            key = this.get('displayKey') || 'value';
        return {
            name: name,
            displayKey: key,
            source: getDynamicData(key)
        };
    }
});

Em.Handlebars.helper('type-ahead', Em.TypeaheadComponent);