select2

app/pods/measurements/route.js

@@ -16,26 +16,26 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
     models.strains = models.strains.sortBy('fullName');
     let strains = models.strains.map((strain)=>{
       return Ember.Object.create({
-        val: strain.get('id'),
+        id: strain.get('id'),
-        lab: strain.get('fullName'),
+        text: strain.get('fullName'),
       });
     });
     strains.unshiftObjects(Ember.Object.create({
-      val: 'all',
+      id: 'all',
-      lab: 'All Strains',
+      text: 'All Strains',
     }));
     controller.set('strains', strains);
 
     models.characteristics = models.characteristics.sortBy('characteristicName');
     let characteristics = models.characteristics.map((characteristic)=>{
       return Ember.Object.create({
-        val: characteristic.get('id'),
+        id: characteristic.get('id'),
-        lab: characteristic.get('characteristicName'),
+        text: characteristic.get('characteristicName'),
       });
     });
     characteristics.unshiftObjects(Ember.Object.create({
-      val: 'all',
+      id: 'all',
-      lab: 'All Characteristics',
+      text: 'All Characteristics',
     }));
     controller.set('characteristics', characteristics);
   },

app/pods/measurements/template.hbs

@@ -5,11 +5,12 @@
   </div>
   <div class="span-8">
     {{
-      view "select"
+      select-2
+      multiple=true
       content=strains
-      optionValuePath="content.val"
+      value=selectedStrains
-      optionLabelPath="content.lab"
+      optionValuePath="id"
-      value=selectedStrain
+      placeholder="Choose a strain"
     }}
   </div>
 </div>
@@ -19,11 +20,12 @@
   </div>
   <div class="span-8">
     {{
-      view "select"
+      select-2
+      multiple=true
       content=characteristics
-      optionValuePath="content.val"
-      optionLabelPath="content.lab"
       value=selectedCharacteristic
+      optionValuePath="id"
+      placeholder="Choose a characteristic"
     }}
   </div>
 </div>

bower.json

@@ -14,6 +14,7 @@
     "qunit": "~1.17.1",
     "flakes": "~1.0.0",
     "ember-simple-auth": "~0.8.0-beta.3",
-    "moment": "~2.9.0"
+    "moment": "~2.9.0",
+    "select2": "3.5.2"
   }
 }

config/environment.js

@@ -41,7 +41,7 @@ module.exports = function(environment) {
       'font-src': "'self'",
       'connect-src': "'self' http://127.0.0.1:4200",
       'img-src': "'self'",
-      'style-src': "'self'",
+      'style-src': "'self' 'unsafe-inline'",
       'media-src': "'self'"
     }
   }

package.json

@@ -37,6 +37,7 @@
     "ember-data": "1.0.0-beta.18",
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.2",
+    "ember-select-2": "1.3.0",
     "express": "^4.12.4",
     "glob": "^4.5.3",
     "jsonwebtoken": "^5.0.0",