使用 Ember JS 实现自动完成答案

【问题标题】：Implementing Auto Complete with Ember JS使用 Ember JS 实现自动完成
【发布时间】：2014-10-09 17:23:26
【问题描述】：

我正在尝试使用人员列表实现自动完成搜索。我希望列表随着用户输入他们正在寻找的名称而缩小。

我从 Embercasts 的人那里找到了很好的资源，但不幸的是他们从未完成第 2 部分。

视频：

http://www.embercasts.com/episodes/building-an-autocomplete-widget-part-1

源代码：

https://github.com/embercasts/building-an-autocomplete-widget

我不明白以下内容：

如何指明我希望自动完成过滤的型号？演示代码使用了一个数组，但我不知道如何让它使用我的模型并按 nameFirst 和 nameLast name 过滤。

数据：

App.Swimmer = DS.Model.extend({
    nameFirst: DS.attr(),
    nameLast: DS.attr(),
    level: DS.attr(),
    birthdate: DS.attr(),
    gender: DS.attr(),
    note:DS.attr(),
    lesson: DS.belongsTo('lesson', {async: true}),
    family:DS.belongsTo('family',{async: true})
});

非常感谢您快速演示如何使用模型和夹具数据实现此自动完成。

【问题讨论】：

标签： javascript ember.js autocomplete

【解决方案1】：

这里需要注意的是 FixtureAdapter 不支持查询逻辑。这是一个未经测试 (!) 的解决方案，应该与 RESTAdapter 一起使用...

Javascript：

App.SwimmerController = Ember.ObjectController.extend({
    filterFirst: null,
    filterLast: null,
    filteredMatches: function() {
        return this.store.find('swimmer', {
            nameFirst: this.get('filterFirst'),
            nameLast: this.get('filterLast')
        });
    }.property('filterFirst', 'filterLast')
});

模板：

<div>
    <em>First:</em>{{input value=filterFirst}} <em>Last:</em>{{input value=filterLast}}
</div>
<ul>
    {{#each result in filteredMatches}}
        <li>{{result.nameFirst}} {{result.nameLast}}</li>
    {{else}}
        <em>No matches found!</em>
    {{/each}}
<ul/>

【讨论】：