ember.js中特定div内的关键事件

Question

我在ember.js中创建了一个自动完成搜索栏。我遇到的问题是能够按下向下键并继续自动完成div给我的列表。提前谢谢你......

<li {{bind-attr class="opacitySet:border:field"}}>
    <i class="icon-search"></i>
    {{input type="search" placeholder="Search Keyword" focus-out="focusOut" focus-in="focusIn" value=searchText}}
    <div {{bind-attr class=":ee opacitySet::hide"}}>
        {{#each searchResults}}
            <h4><i class="icon-doc-text" style="padding:0;"></i>{{this}}<img src="assets/images/Arrow.png" class="pull_right"></h4>
        {{/each}}
    </div>
</li>

===========控制器=============

App.FaqController = Ember.Controller.extend({
    showAllAnswers: false,
    opacitySet: false,
    searchText: '',

    searchResults: function(){
        var searchText = this.get('searchText');
        if(!searchText){ return;}

        var regex = new RegExp(searchText, 'i');
        return question.filter(function(name) {

            return name.trim();
                return name.match(regex);
        });
    }.property('searchText'),

    actions:{
        toggleBox: function(){
            this.toggleProperty('showMessageBox');
        },
        hideBox: function(){
            this.set('showMessageBox', false);
        },
        toggleAllAnswers: function(){
            this.toggleProperty('showAllAnswers');
        },
        focusOut: function(){
            this.set('opacitySet', false);
        },
        focusIn: function(){
            this.set('opacitySet', true);
        },
    }
});