Turn suggestions into hyperlinks

The suggestions are now clickable hyperlinks.

static/skin/taskbar.css

@@ -9,7 +9,8 @@
     transition: 0.3s;
     width: 100%;
     box-sizing: border-box;
-    background: #bbb;
+    background: #e3e3e3;
+    border-bottom: 1px solid #aaa;
 }
 
 #kiwixtoolbar>a {
@@ -123,20 +124,19 @@ label[for=kiwixsearchbox] {
     vertical-align: middle;
 }
 
-body {
-    padding-top: calc(3em - 5px) !important;
+a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active {
+    display: block;
+    text-decoration: none;
+    color: inherit;
 }
 
-/* Try to fix buggy stuff in jquery-ui autocomplete */
-#ui-id-1,
-.ui-autocomplete {
-    background: white !important;
-    border: solid 1px grey !important;
+.autoComplete_wrapper > ul {
+    max-height: none !important;
     column-count: 1 !important;
 }
 
-li.ui-state-focus {
-    font-weight: bold;
+body {
+    padding-top: calc(3em - 5px) !important;
 }
 
 @media(min-width:420px) {
@@ -155,6 +155,11 @@ li.ui-state-focus {
 
 @media (max-width: 645px) {
 
+    .autoComplete_wrapper > ul {
+        max-height: none !important;
+        column-count: 1 !important;
+    }
+
     #kiwix_button_show_toggle~label~.kiwix_button_cont.searching {
         display: none !important;
     }

static/skin/taskbar.js

@@ -28,6 +28,7 @@ document.addEventListener('DOMContentLoaded', function () {
         },
         keys: ['label'],
       },
+      submit: true,
       searchEngine: (query, record) => {
         // We accept all records
         return true;
@@ -36,15 +37,32 @@ document.addEventListener('DOMContentLoaded', function () {
         noResults: true,
         /* We must display 10 results (requested) + 1 potential link to do a full text search. */
         maxResults: 11,
-        highlight: true
       },
       resultItem: {
         element: (item, data) => {
-          item.innerHTML = `${htmlDecode(data.value.label)}`;
+          let searchLink;
+          if (data.value.kind == "path") {
+            searchLink = `${root}/${bookName}/${htmlDecode(data.value.path)}`;
+          } else {
+            searchLink = `${root}/search?content=${encodeURIComponent(bookName)}&pattern=${encodeURIComponent(htmlDecode(data.value.value))}`;
           }
-        }
+          item.innerHTML = `<a class="suggest" href="${searchLink}">${htmlDecode(data.value.label)}</a>`;
+        },
+        highlight: "autoComplete_highlight",
+        selected: "autoComplete_selected"
       }
-    );
+    }
+  );
+
+  document.querySelector('#kiwixsearchform').addEventListener('submit', function(event) {
+    try {
+      const selectedElemLink = document.querySelector('.autoComplete_selected > a').href;
+      if (selectedElemLink) {
+        event.preventDefault();
+        window.location = selectedElemLink;
+      }
+    } catch (err) {}
+  });
 
   /*
         // cybook hack
@@ -99,4 +117,4 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         });
     };*/
-});
+});