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も、この点で好スタートを切りました。