Observe change/keyup event on {{input}} helper


#1

I’m trying to write a simple list filter using an input helper. I want to type a few letters then filter down a list of employees. Hit Backspace, the list gets bigger again.

I spent 30 or 40 minutes last night trying to determine how to observe the change/keyup events on the input helper (or Ember.TextField) from within my controller to no avail. I tried an action property and I tried observing the input field but neither of those worked.

I wondered if anyone had guidance for me? Below are the relevant bits of code:

<script type="text/x-handlebars" data-template-name="people">
    <h2>People route</h2>
    {{input placeholder="Search" name="search"}}
    {{#each peep in controller}}
        <p>
            {{#link-to "person" peep}}
                {{peep.First}} {{peep.Last}}
            {{/link-to}}
        </p>
    {{/each}}
</script>
App.PeopleController = Ember.ArrayController.extend({
    loadData: function(){
        var controller = this;
        utils.loadJSON(function(data) {
                var modeled = utils.renderModeled(App.Person, data);
                controller.pushObjects(modeled);
        });
    },
    searchTextDidChange: function(){
        console.log('searchTextDidChange');
    }.observes('search'),
    actions: {
        changeme: function(){
            console.log('changeme');
        }.observes('search')
    }
});

#2

Never mind, I finally got it thanks to this Github comment: