Add find-as-you-type on the choose template page

Not everyone knows how to use `ctrl` + `f`, and it’s not scoped to
just the list of templates.

The template you want to work with is often not the first one in the
list, but ordering by created at is useful for other reasons (mainly
around first time use).

This commit adds a find as you type control which aims to give users a
quick way of getting to the template they want to work with.

app/assets/javascripts/liveSearch.js

@@ -0,0 +1,44 @@
+(function(Modules) {
+  "use strict";
+
+  let normalize = (string) => string.toLowerCase().replace(/ /g,'');
+
+  let filter = ($searchBox, $targets) => () => {
+
+    let query = normalize($searchBox.val());
+
+    $targets.each(function() {
+
+      let content = $(this).text();
+
+      $(this).toggle(
+        normalize(content).indexOf(normalize(query)) > -1
+      );
+
+    });
+
+  };
+
+
+  Modules.LiveSearch = function() {
+
+    this.start = function(component) {
+
+      let $component = $(component);
+
+      let $searchBox = $('input', $component);
+
+      let filterFunc = filter(
+        $searchBox,
+        $($component.data('targets'))
+      );
+
+      $searchBox.on('keyup input', filterFunc);
+
+      filterFunc();
+
+    };
+
+  };
+
+})(window.GOVUK.Modules);

app/assets/stylesheets/components/live-search.scss

@@ -0,0 +1,16 @@
+input[type=search] {
+  // overrides this nasty global from GOV.UK template
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.live-search {
+
+  display: none;
+
+  .js-enabled & {
+    display: block;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -58,6 +58,7 @@ $path: '/static/images/';
 @import 'components/tick-cross';
 @import 'components/list-entry';
 @import 'components/letter';
+@import 'components/live-search';
 @import 'components/vendor/breadcrumbs';
 @import 'components/vendor/responsive-embed';