Merge #1194

1194: Start search while typing r=carols10cents

Similar to e.g. https://yarnpkg.com/ this PR changes the code to start the search while typing instead of having to click the <kbd>Enter</kbd> button. It also debounces the search task (250ms) to limit the amount of requests that are hitting the server.

![crates-live-search](https://user-images.githubusercontent.com/141300/33524728-71d1a434-d822-11e7-8d20-7025fbc5f369.gif)

/cc @carols10cents

Author: bors-voyager[bot]

app/controllers/application.js

@@ -21,7 +21,11 @@ export default Controller.extend(EKMixin, {
     }),
 
     actions: {
-        search() {
+        search(q) {
+            if (q !== undefined) {
+                this.set('searchQuery', q);
+            }
+
             this.transitionToRoute('search', {
                 queryParams: {
                     q: this.get('searchQuery'),

app/controllers/search.js

@@ -3,10 +3,12 @@ import { computed } from '@ember/object';
 import { alias, bool, readOnly } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
-import { task } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
 
 import PaginationMixin from '../mixins/pagination';
 
+const DEBOUNCE_MS = 250;
+
 export default Controller.extend(PaginationMixin, {
     search: service(),
     queryParams: ['q', 'page', 'per_page', 'sort'],
@@ -40,10 +42,13 @@ export default Controller.extend(PaginationMixin, {
     hasItems: bool('totalItems'),
 
     dataTask: task(function* (params) {
+        // debounce the search query
+        yield timeout(DEBOUNCE_MS);
+
         if (params.q !== null) {
             params.q = params.q.trim();
         }
 
         return yield this.store.query('crate', params);
-    }).drop(),
+    }).restartable(),
 });

app/templates/application.hbs

@@ -21,7 +21,7 @@
         <input type="text" class="search" name="q" id="cargo-desktop-search"
                 placeholder="Click or press 'S' to search..."
                 value={{searchQuery}}
-                oninput={{action (mut searchQuery) value="target.value"}}
+                oninput={{action "search" value="target.value"}}
                 autofocus="autofocus"
                 tabindex="1"
                 required
@@ -106,7 +106,7 @@
     <input type="text" class="search" name="q"
             placeholder="Search"
             value={{searchQuery}}
-            oninput={{action (mut searchQuery) value="target.value"}}
+            oninput={{action "search" value="target.value"}}
             autocorrect="off"
             tabindex="1"
             required>