Autocomplete using Ember.js

Question

I have been unable to figure this one out...

I want to build an autocomplete box that displays a list of contacts based on the search. I currently have this controller for the users:

App.UsersController = Ember.ArrayController.extend({
        sortProperties: ['firstName'],
        sortAscending: true,
        isCreateUser: false,
        sortByDigital: false,
        sortByPhysical: false,
        sortDisplayAll: true,
        createUser: function() {
            this.set('isCreateUser', true);
        },

        motoDigital: function() {
            this.set('sortByDigital', true);
            this.set('sortByPhysical', false);
            this.set('sortDisplayAll', false);
        },
        motoPhysical: function() {
            this.set('sortByDigital', false);
            this.set('sortDisplayAll', false);
            this.set('sortByPhysical', true);
        },
        displayAll: function() {
            this.set('sortByDigital', false);
            this.set('sortDisplayAll', true);
            this.set('sortByPhysical', false);
        },
        searchText: null,

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

            var regex = new RegExp(searchText, 'i');
            return this.get('firstName').filter(function(firstName) {
                return firstName.match(regex);
            });
        }.property('searchText')
    });

• The relevent pieces being the searchText and searchResults .

I then have this as the template (hopefully its not too long):

<script type="text/x-handlebars" data-template-name="users"> 
  <div class="span10 tableContainer">
  {{#linkTo 'users.new' class="btn btn-primary createUser"}}<i class="icon-plus icon-white"></i> New Contact{{/linkTo}}
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Display&nbsp&nbsp<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <a {{action displayAll}}>All Contacts</a>
            <a {{action motoDigital}}>Digital Subscriber</a>
            <a {{action motoPhysical}}>Physical Subscriber</a>
        </ul>
        {{input type="text" value=searchText placeholder="Search..."}}
            {{#each searchResults}}
                <a>{{firstName}}</a>
            {{/each}}
    </div>
    <div class="tableScrollable">
    <table class="table table-striped">
      <thead>
        <tr>
          <th class="nameHead">Name</th>
          <th class="companyHead">Company</th>
          <th class="emailHead">Email</th>
        </tr>
      </thead>
      <tbody>
      <tr>
          <td class="name">&nbsp</td>
          <td class="company">&nbsp</td>
          <td class="email">&nbsp</td>
      </tr>
          {{#if sortByDigital}}
            {{#each model}}
                {{#if motoDigital}}
                    <tr>
                      <td class="name"><strong>{{#linkTo 'user' this }}<i class="icon-user"></i> {{firstName}} {{lastName}}{{/linkTo}}</strong></td>
                      <td class="company">{{company}}</td>
                      <td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td>
                    </tr>
                {{/if}}
            {{/each}}
          {{/if}}

          {{#if sortDisplayAll}}
            {{#each model}}
                 <tr>
                      <td class="name"><strong>{{#linkTo 'user' this }}<i class="icon-user"></i> {{firstName}} {{lastName}}{{/linkTo}}</strong></td>
                      <td class="company">{{company}}</td>
                      <td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td>
                 </tr>
            {{/each}}
          {{/if}}

          {{#if sortByPhysical}}
            {{#each model}}
                {{#if motoPhysical}}
                     <tr>
                          <td class="name"><strong>{{#linkTo 'user' this }}<i class="icon-user"></i> {{firstName}} {{lastName}}{{/linkTo}}</strong></td>
                          <td class="company">{{company}}</td>
                          <td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td>
                     </tr>
                 {{/if}}
            {{/each}}
          {{/if}}
      </tbody>
    </table>
   </div>
  </div>
  <div class="span3">
        {{outlet}}
  </div>
  </script>

I want the list displayed using this template to filter itself based on the search... and im using some code for the autocomplete via: http://www.embercasts.com/episodes/building-an-autocomplete-widget-part-1

Any help is greatly appreciated!

Answer 1

It's a little difficult to make out what is wrong. Perhaps try posting a jsbin.

One thing I noticed was, searchText is not bound to value . You may want to change that to,

{{input type="text" valueBinding=searchText placeholder="Search..."}}