key events inside a specific div in ember.js

I created a auto complete search bar in ember.js. The problem that i am having is be able to to press the down key and and go ever the listing that the autocomplete div is giving me. Thank you in advance...

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

===========controller=============

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