Question

我一直无法想出这个......

我想构建一个自动填充框，根据搜索显示联系人列表。我目前为用户提供此控制器：

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

相关部分是searchText和searchResults。

然后我将此作为模板（希望它不会太长）：

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

我希望使用此模板显示的列表根据搜索过滤自身...并使用一些代码通过以下方式自动完成：http://www.embercasts.com/episodes/building-an-autocomplete-widget-part-1

非常感谢任何帮助！

Answer 1

弄清楚什么是错的有点困难。也许尝试发布一个jsbin。

我注意到的一件事是，searchText未绑定到value。您可能希望将其更改为，

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

使用Ember.js自动完成

1 个答案: