2013-04-21 36 views
9

一个TextField我要创建一个文本字段在灰烬自动完成对基于匹配每个按键获取数据库数据。创建具有自动完成

他们的任何内置小工具在Ember为此?

+0

如果有人在寻找解决方案,下面是[embercast](http://www.embercasts.com/episodes/building-an-autocomplete-widget-part-1)。 – Sisir 2014-12-18 16:44:39

回答

2

Ember.js中没有内置组件,但是根据经验,这样的组件可以非常容易地自行编写。在EmberCamp Trek Glowacki表示,他希望不需要任何部件库。

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

+2

[Bootstrap Typeahead](http://stackoverflow.com/questions/13637966/emberjs-data-source-twitter-bootstrap-typeahead) – pjlammertyn 2013-04-24 11:07:29

8

您可以使用Ember.Textfield的事件来做到这一点。 (CoffeeScript的玉)

搜索查看

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 

**补充丢失的圆括号

+0

会有一种很好的方法在搜索上添加300毫秒的延迟吗?我正在过滤一个半大的DOM列表,我不希望Ember尝试过滤输入的字符。如果客户正在尝试输入名称。想象过滤之间的最小延迟可能会有所帮助。 – ootoovak 2013-05-26 21:12:16

+1

是的,我可以很快将它添加到代码中。但是,基本上,您可以在JavaScript中设置一个计时器来运行搜索功能,如果有另一个按键进入,您可以取消该计时器,然后设置另一个计时器。这样,快速打字不会每次都会导致搜索,但打字时会打破x。 – WallMobile 2013-05-28 17:08:47

+3

@ootoovak在调用'Ember.run.debounce'或Lodash的'_.debounce'时包装'keyUp'的主体。 – Bluu 2013-10-07 19:34:10