Databases
StackOverflow2013
Postsdbo
POAutocomplete using Ember.js
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutocomplete using Ember.js
    text
    copied!<p>I have been unable to figure this one out...</p> <p>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:</p> <pre><code>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') }); </code></pre> <ul> <li>The relevent pieces being the <code>searchText</code> and <code>searchResults</code>. </li> </ul> <p>I then have this as the template (hopefully its not too long):</p> <pre><code>&lt;script type="text/x-handlebars" data-template-name="users"&gt; &lt;div class="span10 tableContainer"&gt; {{#linkTo 'users.new' class="btn btn-primary createUser"}}&lt;i class="icon-plus icon-white"&gt;&lt;/i&gt; New Contact{{/linkTo}} &lt;div class="btn-group"&gt; &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;Display&amp;nbsp&amp;nbsp&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;a {{action displayAll}}&gt;All Contacts&lt;/a&gt; &lt;a {{action motoDigital}}&gt;Digital Subscriber&lt;/a&gt; &lt;a {{action motoPhysical}}&gt;Physical Subscriber&lt;/a&gt; &lt;/ul&gt; {{input type="text" value=searchText placeholder="Search..."}} {{#each searchResults}} &lt;a&gt;{{firstName}}&lt;/a&gt; {{/each}} &lt;/div&gt; &lt;div class="tableScrollable"&gt; &lt;table class="table table-striped"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="nameHead"&gt;Name&lt;/th&gt; &lt;th class="companyHead"&gt;Company&lt;/th&gt; &lt;th class="emailHead"&gt;Email&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="name"&gt;&amp;nbsp&lt;/td&gt; &lt;td class="company"&gt;&amp;nbsp&lt;/td&gt; &lt;td class="email"&gt;&amp;nbsp&lt;/td&gt; &lt;/tr&gt; {{#if sortByDigital}} {{#each model}} {{#if motoDigital}} &lt;tr&gt; &lt;td class="name"&gt;&lt;strong&gt;{{#linkTo 'user' this }}&lt;i class="icon-user"&gt;&lt;/i&gt; {{firstName}} {{lastName}}{{/linkTo}}&lt;/strong&gt;&lt;/td&gt; &lt;td class="company"&gt;{{company}}&lt;/td&gt; &lt;td class="email"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt; &lt;a {{bindAttr mailto="email"}}&gt;{{email}}&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; {{/if}} {{/each}} {{/if}} {{#if sortDisplayAll}} {{#each model}} &lt;tr&gt; &lt;td class="name"&gt;&lt;strong&gt;{{#linkTo 'user' this }}&lt;i class="icon-user"&gt;&lt;/i&gt; {{firstName}} {{lastName}}{{/linkTo}}&lt;/strong&gt;&lt;/td&gt; &lt;td class="company"&gt;{{company}}&lt;/td&gt; &lt;td class="email"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt; &lt;a {{bindAttr mailto="email"}}&gt;{{email}}&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; {{/each}} {{/if}} {{#if sortByPhysical}} {{#each model}} {{#if motoPhysical}} &lt;tr&gt; &lt;td class="name"&gt;&lt;strong&gt;{{#linkTo 'user' this }}&lt;i class="icon-user"&gt;&lt;/i&gt; {{firstName}} {{lastName}}{{/linkTo}}&lt;/strong&gt;&lt;/td&gt; &lt;td class="company"&gt;{{company}}&lt;/td&gt; &lt;td class="email"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt; &lt;a {{bindAttr mailto="email"}}&gt;{{email}}&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; {{/if}} {{/each}} {{/if}} &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="span3"&gt; {{outlet}} &lt;/div&gt; &lt;/script&gt; </code></pre> <p>I want the list displayed using this template to filter itself based on the search... and im using some code for the autocomplete via: <a href="http://www.embercasts.com/episodes/building-an-autocomplete-widget-part-1" rel="nofollow">http://www.embercasts.com/episodes/building-an-autocomplete-widget-part-1</a></p> <p>Any help is greatly appreciated!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload