charlieridley / ember-typeahead

EmberJS autocomplete component using typeahead.js

Ember Typeahead.js Component

An autocomplete component for ember.js using typeahead.js

Installation

Install using Bower

bower install ember-typeahead

Usage

Include typeahead.js and ember-typeahead.js

<script src="typeahead.js"></script> 
<script src="ember-typeahead.js"></script> 

Add the typeahead tag in your handlebars template

{{type-ahead data=content name="colour" selection=myColour}}

Since ember-typeahead extends Ember.TextField, you can still bind other properties such as value and action:

{{type-ahead data=content name="colour" selection=myColour action=createNewColour value=colourText}}

Properties

• data An array of ember objects used for the lookup. This can also be a promise that resolves to an array
• name The name of the property on the ember object which is to be displayed
• selection Binds the selected value. This changes on the typeahead:selected and typeahead:autocompleted events (see typeahead.js custom events)

Tests

I didn't do any tests. For every line of untested code a puppy dies. 59 puppies died in the making of this component.

ember-typeahead's Issues

App.Post.find() doesn't work ?

App.PostsRoute = Ember.Route.extend
   model: ->
     App.Post.find()
#handlebar
{{type-ahead data=content name="type" selection=myColour}}

If I use [ Ember.Object.create(type: "Red"), Ember.Object.create(type: "Reddi") ] in model it works fine. How to make it work for App.Post.find() ?

Any help would be appreciated.

Get a really strange error in console

I have a page with:

Element New
{{type-ahead data=content name="colour" selection=myColour}} {{myColour.colour}}

when I render the page/view/template my console says:
Assertion failed: You must use Ember.set() to access this property (of Ember.TypeAheadComponent:ember660) ember-v1.3.2.js:3285
Assertion failed: You called yield in a template that was not a layout ember-v1.3.2.js:3285
Uncaught TypeError: Cannot call method '_yield' of undefined

Dependencies out of date

The ember version in the bower.json, is 1.2.0 which is quite old. It seems to work fine with ember 1.10 so maybe it's worth while to indicate it's compatible on 1.2 thur to 1.10. Unless there's an incompatibility I haven't noticed

TypeError: undefined is not a function

"TypeError: undefined is not a function" error inside vendor.js file cause of this statement Em.isEmpty(obj.get(key))

this is my component

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

it will be very useful for me to use typeahead component, I hope it will work for my project.
But setup of component is not clear for me. plz help me

(Important question) working with dynamic data

it is possible to work with dynamic dataset?

Can not get it working

Working on implementing the script for last couple of hours. Trying to get it to work with latest version of typehead.js. When I start typing nothing happens. No error..

http://jsfiddle.net/sisir/r9mv4et3/1/

spaces in text fails to be typeahead'ed

I've noticed that the typeahead doesn't function correctly with spaces in the actual field (like 'hello world'). On the typeahead examples it works as expected, but not using this plugin. I don't know where to start to fix this or why it would break.

Typeahead Remote

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

Cannot use more than one acomplete field

Got it working nicely on my first input , i changed ember select with it and got it styled. But on my formset, i've another autocomplete field. The second autocomplete field fetched the same data as first. (Same output on both of them.).

Route

controller.set('organizations', this.store.findAll('agents/organization'));
controller.set('dbcountries', this.store.findAll('agents/geography/countries'));
Models

var Organization = DS.Model.extend({
name: DS.attr('string'),
});

Organization.FIXTURES = [
{
id: 1,
name: 'TU',
},
{
id: 2,
name: 'TLU',
}
];

'var Countries = DS.Model.extend({
code: DS.attr('string'),
name: DS.attr('string')
});

Countries.FIXTURES = [
{
id: 1,
code: 'est',
name: 'Estonia'
},
{
id: 2,
code: 'fin',
name: 'Finland'
}
];
HBS

This works properly

{{type-ahead data=organizations name="name"
selection=field.myColour placeholder="Organizations" class="form-control"}}

This gives results of organization.

{{type-ahead data=dbcountries name="code"
selection=field.country placeholder="Countries" class="form-control"}}