js/search.js: rewrite local search autocomplete and update styling

Signed-off-by: Sebastiaan van Stijn <[email protected]>

Author: thaJeztah

_includes/body-landing.html

@@ -34,7 +34,7 @@ <h2>What can we help you find?</h2>
       </div>
     </div>
     <div class="row justify-content-center">
-      <form action="/search/" method="GET" class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6">
+      <form action="/search/" method="get" class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6">
         <label class="sr-only" for="st-search-input">Search</label>
         <input
           id="st-search-input"
@@ -47,9 +47,7 @@ <h2>What can we help you find?</h2>
           dir="auto"
           autofocus
         />
-        <div id="autocompleteContainer">
-          <div id="autocompleteResults"></div>
-        </div>
+        <div id="autocompleteResults"></div>
       </form>
     </div>
   </section>

_includes/navigation.html

@@ -4,12 +4,10 @@
     </a>
 </div>
 <div class="search-form" id="search-div">
-    <form class="search-form form-inline" id="searchForm" action="/search/">
+    <form class="search-form form-inline" id="searchForm" action="/search/" method="get">
         <label for="st-search-input" class="sr-only">Search</label>
-        <input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
-        <div id="autocompleteContainer">
-            <div id="autocompleteResults"></div>
-        </div>
+        <input class="search-field form-control ds-input" id="st-search-input" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
+        <div id="autocompleteResults"></div>
         <!-- <button type="submit" class="search-submit btn btn-default">Search</button> -->
     </form>
 </div>

_scss/_landing.scss

@@ -99,8 +99,8 @@ body.landing {
     }
 
     #autocompleteResults {
-      left: 10px;
-      right: 10px;
+      left: 14px;
+      right: 14px;
       width: unset;
 
       @include before-lg-width {

_scss/_night-mode.scss

@@ -89,16 +89,21 @@ body.night {
     .toc-nav i.fa {
         color: $body-text-night;
     }
-    div#autocompleteResults {
+    #autocompleteResults {
         background: $bg-search-results-night;
         border: 1px solid $black;
-        color: $white;
-    }
-    .autocompleteList li {
-        color: #b4c3d2;
+        //color: $white;
     }
-    div#autocompleteResults span {
-        color: #b7a4de;
+    .autocompleteResult {
+        &.selected {
+            background-color: #1f262e;
+        }
+        li {
+            color: #b4c3d2;
+        }
+        span {
+          color: #b7a4de;
+        }
     }
 
     /* for google results styles - forgive us css gods */

_scss/_utilities.scss

@@ -135,73 +135,59 @@ input[type=text] {
  * autocompleteResults *********************************************************
  */
 
-div#autocompleteResults {
+#autocompleteResults {
     display: none; /* toggled through javascript */
 
     background: #E6F5FD;
     border: 1px solid #eee;
     box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.28);
-    padding: 20px 0 15px 0;
     margin: 10px 0 0 0;
     position: absolute;
     width: 600px;
     z-index: 9999;
 }
 
-ul.autocompleteList {
-    list-style: none;
-    max-width: 100%;
-
-    @include before-lg-width {
-        padding: 0;
+.autocompleteResult {
+    border-bottom: 1px solid rgba(203, 205, 209, 0.4);
+    cursor: pointer;
+    padding: 15px;
+    &.selected {
+      background-color: #f5f5f5;
     }
-}
-
-.autocompleteList li {
-    padding: 5px 0 7px 0;
-    max-width: 100%;
-}
-
-div#autocompleteResults span {
-    background: transparent!important;
-    color: #518cad;
-}
 
-.autocompleteTitle {
-    font-weight: bold;
-    font-size: large;
-}
+    ul {
+      list-style: none;
+      margin: 0 5px 0 5px;
+      padding-inline-start: 0;
 
-.autocompleteSelected {
-  background-color: #f5f5f5;
-}
-
-.autocompleteList {
-  list-style-type: none;
-  width: 400px;
-/* commented out 0 padding to allow inherit padding, search results on autocompleteList were getting smashed up against left margin due to this */
-/*  padding: 0; */
-  margin-bottom: 0;
-}
+      @include before-lg-width {
+        padding: 0;
+      }
+    }
 
-.autoCompleteResult {
-    border-bottom: 1px solid rgba(203, 205, 209, 0.4);
-    padding: 15px;
+    li {
+      border: 0;
+      margin: 0;
+      max-width: 100%;
+      padding: 5px 0 7px 0;
+      line-height: normal;
+    }
 
-    &:hover {
-        cursor: pointer;
+    .title {
+      font-weight: bold;
     }
-}
 
-#autocompleteShowAll {
-  padding: 20px 15px;
-}
+    .keywords {
+      font-size: 12px;
+      .glyphicon {
+        padding-right: 10px
+      }
+    }
 
-.autocompleteList li {
-  width: 380px;
-  border: 0;
-  padding-right: 20px;
-  margin: 0;
+    span {
+      background: transparent;
+      color: #518cad;
+    }
 }
 
 @media print {