Question

我正在尝试使用人员列表实现自动完成搜索。我希望列表缩小，因为用户键入了他们正在寻找的名称。

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

视频：

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

源代码：

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

我不明白以下内容：

如何指出我希望自动完成过滤的型号？演示代码使用了一个数组，但我无法弄清楚如何让它使用我的模型并按nameFirst和nameLast名称进行过滤。

数据：

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})
});

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

Answer 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/>

使用Ember JS实现自动完成

1 个答案:

使用Javascript：

模板：