ember.js - 创建具有自动完成功能的 TextField

Question

我必须在 Ember 中创建一个具有自动完成功能的TextField ，以便根据匹配在每次按键时从数据库中获取数据。

他们在 Ember 中有任何内置的小部件吗？

Answer 1

您可以使用 Ember.Textfield 的事件来执行此操作。（咖啡稿和翡翠）

搜索视图

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

搜索模板

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

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

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

搜索控制器

App.SearchController = Ember.ObjectController.extend

  search: (searchTerm) ->
    # do your search

** 添加缺少的括号

Answer 2

EmberCasts 有一个关于如何构建自动完成小部件的精彩视频。

我问他们过滤的毫秒延迟，我被告知他们将在下一集中介绍他们所做的事情。

Answer 3

Ember.js 中没有内置组件，但根据经验，这样的组件很容易自己编写。在 EmberCamp Trek Glowacki 上说，他希望不再需要任何小部件库。

您还可以使用来自 Twitter Bootstrap 的 Typeahead 或来自 jQuery UI 的 AutoComplete，它们可以一起工作。

Answer 4

github 项目 ember-typeahead在这方面也取得了良好的开端。