Typeahead Remote

[juanmillan85]

Hello,

I am working with ember and typehead. Currently, your implementation uses local. But if I want dynamic data, I would like to use remote or update the local dataset. I dont want to make an ajax request with plain jquery. I want to keep using my model and use ember-data.

Thanks for the code, Juan

[charlieridley]

Yep, the dynamic isn't supported yet. If you come up with a good way to do this which works with ED then submit a pull request. Thanks

[adsmit14]

Great job!

So far the only way I could get dynamic data to work is to leave out the name and then destroy/build whenever the source changes.

https://github.com/adsmit14/Finances/blob/master/Finances/App/Src/Components/AutoCompleteComponent.js

[ndreckshage]

Heres an example using remote data. Example does not use this plugin though, I needed to adjust a few things.

• remote rather than local data
• uses controller actions rather than 'selection' from this plugin
• extends Ember Component rather than Textfield

I extended Ember Component because Typeahead and Ember's Textfield were interfering for me. I think this is because I switched to sendAction, which Ember Textfield has defaults for. Just found it easier to use component, where I don't have to worry about the views default behavior in combination with Typeahead.

Call component with...

{{twitter-typeahead classNames="exampleClass"
                    placeholder="Type 'abracadabra'..."
                    remote="/endpoint.json"
                    customTemplate="<i>{{value}}</i>"
                    action="exampleAction" }}

Also doesn't need extra helper registration, empty component template, etc. And gets rid of super call since not extending TextField.

working jsbin

[Nininea-zz]

I have solved this problem this way , this is my ember-typeahead component:

(function () {

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);

})();