Add autocomplete

Author: Gaurav0

app/controllers/autocomplete.js

@@ -0,0 +1,61 @@
+import Ember from 'ember';
+
+export default Ember.ObjectController.extend({
+   text: "",
+   languages: [
+       "Ada",
+       "Algol",
+       "Alice",
+       "Assembly",
+       "Basic",
+       "C",
+       "C#",
+       "C++",
+       "Clojure",
+       "COBOL",
+       "CoffeeScript",
+       "Dart",
+       "Delphi",
+       "ECMAScript",
+       "Erlang",
+       "F#",
+       "Fortran",
+       "FoxPro",
+       "Go",
+       "Groovy",
+       "Haskell",
+       "J#",
+       "Java",
+       "JavaScript",
+       "JScript",
+       "Lisp",
+       "Logo",
+       "Magic",
+       "MATLAB",
+       "Mercury",
+       "Monkey",
+       "Modula-2",
+       "Objective-C",
+       "OCaml",
+       "Pascal",
+       "Perl",
+       "PHP",
+       "PL/SQL",
+       "Prolog",
+       "Python",
+       "Q",
+       "R",
+       "Ruby",
+       "Rust",
+       "Scala",
+       "Scheme",
+       "Smalltalk",
+       "Tcl",
+       "Turing",
+       "TypeScript",
+       "VBScript",
+       "Visual Basic",
+       "Whitespace",
+       "xBase"
+   ]
+});

app/controllers/slider.js

@@ -10,7 +10,7 @@ export default Ember.ObjectController.extend({
         this.set('num2', this.get('num'));
     }.observes('num'),
     actions: {
-        didSlide: function(event, ui) {
+        didSlide: function() {
             this.set('text', this.get('text') + "_");
         }
     }

app/router.js

@@ -6,11 +6,12 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+    this.route('autocomplete');
     this.route('button');
     this.route('datepicker');
     this.route('progressBar');
-    this.route('spinner');
     this.route('slider');
+    this.route('spinner');
 });
 
 export default Router;

app/templates/application.hbs

@@ -1,9 +1,10 @@
 <nav>
+    <li>{{#link-to "autocomplete"}}Autocomplete{{/link-to}}</li>
     <li>{{#link-to "button"}}Button{{/link-to}}</li>
     <li>{{#link-to "datepicker"}}Datepicker{{/link-to}}</li>
     <li>{{#link-to "progressBar"}}Progress Bar{{/link-to}}</li>
-    <li>{{#link-to "spinner"}}Spinner{{/link-to}}</li>
     <li>{{#link-to "slider"}}Slider{{/link-to}}</li>
+    <li>{{#link-to "spinner"}}Spinner{{/link-to}}</li>
 </nav>
 
 {{outlet}}

app/templates/autocomplete.hbs

@@ -0,0 +1,22 @@
+<h2>Autocomplete</h2>
+
+{{jqui-autocomplete value=text source=languages}} {{text}}
+
+<p>To use the autocomplete widget as above, just add the following template and controller to your application:</p>
+
+<h4>Template:</h4>
+<p><code>\{{jqui-autocomplete value=text source=languages}} \{{text}}</code></p>
+
+<h4>Controller</h4>
+<p><code><pre>
+import Ember from 'ember';
+
+export default Ember.ObjectController.extend({
+   text: "",
+   languages: [
+       "Ada",
+       "Algol",
+       // ...
+   ]
+});
+</pre></code></p>