Using an ember-data model in typeahead

Question

I want to use Typeahead.js in my Ember app, but am not sure how to have it utilize my ember-data RESTAdapter model that I've already set up to query my database via our internal API.

Would I put a query in the "local" item to do this, maybe like below (coffeescript)?

$('.typeahead.userGrp').typeahead(
    [
        name: "Users and Groups"
        valueKey: 'namevalue'
        minLength: 1
        limit: 30
        template: hTemplate
        local: ->
            @get('store').find('userGrp')
        engine: Handlebars
    ]
)

Or would I have to stick to an old-fashioned JQuery AJAX call, as described here? Something about the above code doesn't sit right with me, but I'd like to use ember/ember-data's built-in stuff as much as possible.

Also, as a side thought on this question, it seems that if I can get my ember-data adapter working, I'd handle the dynamic URL parts in the RESTAdapter's 'buildURL' function but if not, I'd do it in the 'typeahead.remote.replace' function. Would that make sense?

Any thoughts on this?

Bryan

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

I would probably use the model hook, or in the controller grab the necessary models, then hook them up during didInsertElement on the view (or using the scheduler after ember has rendered Ember transition & rendering complete event) .

Here's an ugly example with screwed up css, but the general idea with it hooking back into ember after a selection is made.

http://emberjs.jsbin.com/EYoWaWiB/4/edit

edited May 23 '17 at 11:49

Community

1
1

answered Dec 05 '13 at 23:07

Kingpin2k

47,277
10
78
96

Thanks! This got me moving along nicely. FYI, I've come upon another issue that might be something only Typeahead.js will have to fix (see [here](https://github.com/twitter/typeahead.js/issues/485)). when I have this line in my typeahead call in my view: `local: @get('controller').allPresetReports()`, typeahead doesn't wait for the promise to be resolved but returns a 'datum is undefined' error. That controller function finds the data from the model I'm interested in (FIXTURES now, but soon REST) and formats it properly for typeahead. We'll see if the folks at typeahead have to say. – bk11425 Dec 09 '13 at 18:01
I've found [this new git project](https://github.com/charlieridley/ember-typeahead) has great potential to address this issue. – bk11425 Dec 17 '13 at 01:40
Unfortunately typeahead has gone through a near complete rewrite since that git project. It does work and its handy but it doesnt have some of the later functionality that later versions of typeahead do. Simply upgrading the typeahead version just breaks it. – Craicerjack Jul 11 '14 at 08:55
somehow my ISP is blocking jsbin. Can anyone please create another version of this using jsfiddle? – Sisir Jan 21 '15 at 19:25

Using an ember-data model in typeahead

1 Answers1