Creating a TextField with autocomplete

Question

I have to create a TextField with autocomplete in Ember to fetch data from Database on each key press based on match.

Is their any built-in widget in Ember for this ?

Answer 1

You can use events of Ember.Textfield to do this. (Coffeescript and Jade)

Search View

App.SearchView = Ember.View.extend

    templateName: 'search'

    searchTerm: null

    searchTextField: Ember.TextField.extend

      insertNewline: ->
        # if the user hits the enter key, you can do something different or call the same function
        @get('controller').search(@get('searchTerm'))

      keyUp: (e) ->
        # validate the item on every keypress
        if (e.currentTarget.value.length > 0)
          @get('controller').search(@get('searchTerm'))

Search Template

script(type='text/x-handlebars', data-template-name='search')

{{view view.searchTextField valueBinding="view.searchTerm" placeholder="search"}}

<button {{action "search"}}>search</button>

Search Controller

App.SearchController = Ember.ObjectController.extend

  search: (searchTerm) ->
    # do your search

** added missing parenthesis

Answer 2

EmberCasts has a good video on how to build an auto complete widget.

I asked them about the millisecond delay on filtering and I was told they will cover that in the next episode they do on it.

Answer 3

There is no built-in component in Ember.js, but from experience such component would be very easy to write yourself. On EmberCamp Trek Glowacki said he hopes no widget library will be ever needed.

You could also use Typeahead from Twitter Bootstrap or AutoComplete from jQuery UI which can be made to work together.