[refs #320] Remove search suggestions heading

It is not currently possible to have the search suggestions heading at
the top of the dropdown list so this has been removed.

Fixed an IE<=11 issue with '.remove()' not supported.

Removed the bolding of the typed text because VoiceOver pronounced the
search suggestion in a funny way. For example, if you start typing 'he'
the results may include 'health', 'behind the headlines', 'heart'. These
would be pronounced as
'he' 'alth',
'behind t' 'he' 'he' 'adlines'
'he' 'art'
which sounds weird and not really acceptable.

packages/components/header/_autocomplete.scss

@@ -97,7 +97,7 @@
   margin-top: 2px;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: nhsuk-spacing(2) nhsuk-spacing(3) nhsuk-spacing(3);
+  padding: nhsuk-spacing(3);
   position: fixed;
   z-index: 1; /* [8] */
 
@@ -156,6 +156,7 @@
 
   &:focus {
     outline: 1px solid transparent;
+    text-decoration: none;
   }
 
   @include mq($from: tablet) {
@@ -165,15 +166,6 @@
   }
 }
 
-.suggestions-title {
-  border-bottom: 1px solid $color_nhsuk-grey-4;
-  color: $nhsuk-text-color;
-  font-size: $nhsuk-base-font-size;
-  font-weight: $nhsuk-font-bold;
-  padding-bottom: 12px; /* [9] */
-  text-align: left;
-}
-
 .autocomplete__option--no-results {
   border-bottom: 0;
   color: $color_nhsuk-black;

packages/components/header/autocomplete.js

@@ -38,26 +38,6 @@ function getFunnelbackResults(query, populateResults) {
   xhr.send();
 }
 
-function addTitle(result) {
-
-  if (!result) {
-    return '';
-  }
-
-  const listBox = document.getElementById('search-field__listbox');
-  const suggestionsTitle = document.getElementById('suggestions-title');
-
-  if (!document.getElementById('suggestions-title')) {
-    const newLI = document.createElement("li"); // create search suggestions <li> and insert into list
-    const textLI = document.createTextNode("Search suggestions");
-    newLI.setAttribute("id", "suggestions-title");
-    newLI.setAttribute("class", "suggestions-title");
-    newLI.appendChild(textLI);
-    listBox.insertBefore(newLI, listBox.childNodes[0]);
-  }
-
-}
-
 function autocomplete(config) {
   const defaultId = 'search-field';
   const id = (config && config.id) ? config.id : defaultId;
@@ -68,20 +48,9 @@ function autocomplete(config) {
     const dots = result.length > truncateLength ? '...' : '';
     const resultTruncated = result.substring(0, truncateLength) + dots;
     const svgIcon = '<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>';
-    const resultsHref = '<a href="https://www.nhs.uk/search?collection=nhs-meta&query=' + result + '">';
-    const typedText = document.getElementById(id).value;
-    const regex = new RegExp(typedText, 'gi');
-    const typedTextStronged = resultTruncated.replace(regex, function ($1) {
-      return '<strong>' + $1 + '</strong>';
-    });
-
-    const listBox = document.getElementById('search-field__listbox');
-    const suggestionsTitle = document.getElementById('suggestions-title');
+    const resultsHref = '<a href="https://www.nhs.uk/search?collection=nhs-meta&query=' + result + '">' + result + '</a>';
 
-    return (
-      addTitle(result),
-      result = svgIcon + resultsHref + typedTextStronged + '</a>'
-    )
+    return svgIcon + resultsHref;
   }
 
   const defaultConfig = {
@@ -107,7 +76,8 @@ function autocomplete(config) {
     ...config,
   };
 
-  document.getElementById(id).remove();
+  const idToremove = document.getElementById(id);
+  idToremove.parentNode.removeChild(idToremove);
   accessibleAutocomplete(accessibleAutocompleteConfig);
 
 }