From 60d52dd017978e266b04bf0bdc945ea570b0e6ce Mon Sep 17 00:00:00 2001
From: kr8n3r <jani@kraner.dev>
Date: Fri, 13 Sep 2019 12:17:29 +0100
Subject: [PATCH] Update spelling suggestions with javascript

Because we use ajax to fetch new data when user performs a search or
adds/removes filters, we also need to show any available suggestions.

As the suggestion block is always there we show or hide it and insert
new suggestion links.

This only runs on search/all finder.
---
 app/assets/javascripts/live_search.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/app/assets/javascripts/live_search.js b/app/assets/javascripts/live_search.js
index 9279570775..60db6e1a30 100644
--- a/app/assets/javascripts/live_search.js
+++ b/app/assets/javascripts/live_search.js
@@ -17,6 +17,7 @@
     this.$loadingBlock = options.$results.find('#js-loading-message')
     this.$sortBlock = options.$results.find('#js-sort-options')
     this.$paginationBlock = options.$results.find('#js-pagination')
+    this.$suggestionsBlock = this.$form.find('#js-spelling-suggestions')
     this.action = this.$form.attr('action') + '.json'
     this.$atomAutodiscoveryLink = options.$atomAutodiscoveryLink
     this.baseTitle = $("meta[name='govuk:base_title']").attr('content') || document.title
@@ -219,6 +220,31 @@
     this.bindSortElements()
   }
 
+  LiveSearch.prototype.updateSpellingSuggestions = function updateSpellingSuggestions (results) {
+    // bail out, as this is only set up on search/all
+    if (this.$suggestionsBlock.length === 0) { return }
+    var suggestionsPresent = results.suggestions.length !== 0
+
+    if (suggestionsPresent) {
+      // there might be more than one suggestion in the future
+      // so we're removing all previous ones before adding new one
+      // as there might be fewer or more new suggestions
+      this.$suggestionsBlock.find('a').remove()
+      for (var i = 0; i < results.suggestions.length; i++) {
+        var suggestion = results.suggestions[i]
+        var $suggestionLink = $('<a>', {
+          text: suggestion.keywords,
+          href: suggestion.link,
+          class: 'govuk-link govuk-!-font-weight-bold'
+        })
+        this.$suggestionsBlock.find('p').append($suggestionLink)
+      }
+    }
+
+    // checks results for any suggestions and hides/shows the container accordingly
+    this.$suggestionsBlock.attr('class', suggestionsPresent ? 'spelling-suggestions--visible' : 'spelling-suggestions')
+  }
+
   LiveSearch.prototype.bindSortElements = function bindSortElements () {
     this.$orderSelect = this.$form.find('.js-order-results')
     this.$relevanceOrderOption = this.$orderSelect.find('option[value=' + this.$orderSelect.data('relevance-sort-option') + ']')
@@ -321,6 +347,7 @@
       this.updateElement(this.$countBlock, results.total)
       this.updateElement(this.$paginationBlock, results.next_and_prev_links)
       this.updateSortOptions(results, action)
+      this.updateSpellingSuggestions(results)
       this.$atomAutodiscoveryLink.attr('href', results.atom_url)
       this.$loadingBlock.text('').hide()
     }