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 {
+a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active {
-    padding-top: calc(3em - 5px) !important;
+    display: block;
+    text-decoration: none;
+    color: inherit;
 }
 
-/* Try to fix buggy stuff in jquery-ui autocomplete */
+.autoComplete_wrapper > ul {
-#ui-id-1,
+    max-height: none !important;
-.ui-autocomplete {
-    background: white !important;
-    border: solid 1px grey !important;
     column-count: 1 !important;
 }
 
-li.ui-state-focus {
+body {
-    font-weight: bold;
+    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,16 +37,33 @@ 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
         if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {

test/server.cpp

@@ -195,11 +195,11 @@ R"EXPECTEDRESULT(                                <img src="../skin/download.png?
       /* url */ "/ROOT/zimfile/A/index",
 R"EXPECTEDRESULT(<link type="root" href="/ROOT"><link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3" rel="Stylesheet" />
 <link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9" rel="Stylesheet" />
-<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" rel="Stylesheet" />
+<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=26082885" rel="Stylesheet" />
 <link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
-<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=12655f29" defer></script>
 <script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
         <label for="kiwix_button_show_toggle"><img src="/ROOT/skin/caret.png?cacheid=22b942b4" alt=""></label>
 )EXPECTEDRESULT"
@@ -211,11 +211,11 @@ R"EXPECTEDRESULT(<link type="root" href="/ROOT"><link type="text/css" href="/ROO
 R"EXPECTEDRESULT(    <link type="text/css" href="/ROOT/skin/search_results.css?cacheid=76d39c84" rel="Stylesheet" />
   <link type="root" href="/ROOT"><link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3" rel="Stylesheet" />
 <link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9" rel="Stylesheet" />
-<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" rel="Stylesheet" />
+<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=26082885" rel="Stylesheet" />
 <link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
-<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=12655f29" defer></script>
 <script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
         <label for="kiwix_button_show_toggle"><img src="/ROOT/skin/caret.png?cacheid=22b942b4" alt=""></label>
 )EXPECTEDRESULT"
@@ -445,11 +445,11 @@ std::string TestContentIn404HtmlResponse::expectedResponse() const
     R"FRAG(
   <link type="root" href="/ROOT"><link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3" rel="Stylesheet" />
 <link type="text/css" href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9" rel="Stylesheet" />
-<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" rel="Stylesheet" />
+<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=26082885" rel="Stylesheet" />
 <link type="text/css" href="/ROOT/skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3" defer></script>
 <script type="text/javascript" src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff" defer></script>
-<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=12655f29" defer></script>
 <script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
 </head>
   <body><span class="kiwix">