Rivers Autocomplete Functionality (#160)

* Rivers Autocomplete Functionality

https://eaflood.atlassian.net/browse/IWTF-2261

I want the ability to type part of the River I wish to add and autocomplete functionality to suggest the closest matches, so that I can efficiently add Rivers

* added accessible-autocomplete module

gulpfile.js

@@ -41,6 +41,16 @@ const copyJs = () => {
   ).pipe(minify({ noSource: true })).pipe(gulp.dest(paths.public + '/javascript'))
 }
 
+const copyMinifiedCSS = () => {
+  return gulp.src('node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css')
+    .pipe(gulp.dest(paths.public + 'stylesheets/'))
+}
+
+const copyMinifiedJS = () => {
+  return gulp.src('node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js')
+    .pipe(gulp.dest(paths.public + '/javascript'))
+}
+
 // Build the sass
 const buildSass = () => {
   return gulp.src(paths.assets + 'sass/*.scss')
@@ -58,7 +68,9 @@ gulp.task('default', gulp.series(
   clean,
   copyAssets,
   copyAdditionalImages,
+  copyMinifiedCSS,
   copyJs,
+  copyMinifiedJS,
   buildSass
 ))
 

package.json

@@ -35,6 +35,7 @@
     "@hapi/joi": "^17.1.1",
     "@hapi/scooter": "^6.0.0",
     "@hapi/vision": "^6.0.1",
+    "accessible-autocomplete": "^2.0.3",
     "aws-sdk": "^2.798.0",
     "bash": "^0.0.1",
     "blankie": "^5.0.0",

src/assets/sass/defra/_accessible-autocomplete-overrides.scss

@@ -0,0 +1,7 @@
+.autocomplete__menu {
+  @include govuk-font($size: 19);
+}
+
+.autocomplete__wrapper {
+  max-width: 16em;
+}

src/assets/sass/main.scss

@@ -10,3 +10,4 @@ $govuk-fonts-path: '#{$govuk-assets-path}fonts/';
 @import 'src/assets/sass/defra/responsive-tables';
 @import 'src/assets/sass/defra/exclusion-checkboxes';
 @import 'src/assets/sass/defra/spinner';
+@import 'src/assets/sass/defra/accessible-autocomplete-overrides';

src/views/activity.html

@@ -153,3 +153,14 @@
     </div>
 </div>
 {% endblock %}
+
+{% block bodyEnd %}
+    <link href="/public/stylesheets/accessible-autocomplete.min.css" rel="stylesheet" type="text/css" />
+    <script src="/public/javascript/accessible-autocomplete.min.js"></script>
+
+    <script>
+        accessibleAutocomplete.enhanceSelectElement({
+            selectElement: document.querySelector('#river')
+        })
+    </script>
+{% endblock %}