Show suggestions using autoComplete.js

This change only shows suggestions. Clicking them does nothing.

static/skin/taskbar.css

@@ -9,6 +9,7 @@
     transition: 0.3s;
     width: 100%;
     box-sizing: border-box;
+    background: #bbb;
 }
 
 #kiwixtoolbar>a {
@@ -100,7 +101,6 @@ label[for="kiwix_button_show_toggle"],
 }
 
 .kiwix #kiwixtoolbar #kiwixsearchform input[type='text'] {
-    position: absolute;
     left: 0;
     box-sizing: border-box !important;
     width: 100%;

static/skin/taskbar.js

@@ -3,46 +3,51 @@ function htmlDecode(input) {
     return doc.documentElement.textContent;
 }
 
-const jq = jQuery.noConflict(true);
+document.addEventListener('DOMContentLoaded', function () {
-jq(document).ready(() => {
+  const root = document.querySelector(`link[type='root']`).getAttribute("href");
-    (function ($) {
-        const root = $( `link[type='root']` ).attr("href");
-
   const bookName = (window.location.pathname == `${root}/search`)
     ? (new URLSearchParams(window.location.search)).get('content')
     : window.location.pathname.split(`${root}/`)[1].split('/')[0];
 
-        const userlang = (new URLSearchParams(window.location.search)).get('userlang') || "en";
+  const autoCompleteJS = new autoComplete(
-        $( "#kiwixsearchbox" ).autocomplete({
+    {
-    
+      selector: "#kiwixsearchbox",
-            source: `${root}/suggest?content=${bookName}&userlang=${userlang}`,
+      placeHolder: document.querySelector("#kiwixsearchbox").title,
-            dataType: "json",
+      threshold: 1,
-            cache: false,
+      debounce: 300,
-    
+      data : {
-            response: function( event, ui ) {
+        src: async (query) => {
-                  for(const item of ui.content) {
+          try {
-                      item.label = htmlDecode(item.label);
+            // Fetch Data from external Source
-                      item.value = htmlDecode(item.value);
+            const source = await fetch(`${root}/suggest?content=${encodeURIComponent(bookName)}&term=${encodeURIComponent(query)}`);
-                      if (item.path) item.path = htmlDecode(item.path);
+            const data = await source.json();
+            return data;
+          } catch (error) {
+            return error;
           }
         },
-    
+        keys: ['label'],
-            select: function(event, ui) {
-                if (ui.item.kind === 'path') {
-                    window.location.href = `${root}/${bookName}/${encodeURI(ui.item.path)}`;
-                } else {
-                    $( "#kiwixsearchbox" ).val(ui.item.value);
-                    $( "#kiwixsearchform" ).submit();
-                }
       },
-        }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
+      searchEngine: (query, record) => {
-            return $( "<li>" )
+        // We accept all records
-              .data( "ui-autocomplete-item", item )
+        return true;
-              .append( item.label )
+      },
-              .appendTo( ul );
+      resultsList: {
-        };
+        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)}`;
+          }
+        }
+      }
+    );
 
-        /* cybook hack */
+  /*
+        // cybook hack
         if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {
             $("html").addClass("cybook");
         }
@@ -93,5 +98,5 @@ jq(document).ready(() => {
                 $('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').removeClass('searching');
             }
         });
-    })(jq);
+    };*/
-})
+});

static/templates/taskbar_part.html

@@ -5,7 +5,7 @@
         <form class="kiwixsearch" method="GET" action="{{root}}/search" id="kiwixsearchform">
           {{#hascontent}}<input type="hidden" name="content" value="{{content}}" />{{/hascontent}}
           <label for="kiwixsearchbox">&#x1f50d;</label>
-          <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" title="{{{SEARCHBOX_TOOLTIP}}}" aria-label="{{{SEARCHBOX_TOOLTIP}}}">
+          <input autocomplete="off" id="kiwixsearchbox" name="pattern" type="text" size="50" title="{{{SEARCHBOX_TOOLTIP}}}" aria-label="{{{SEARCHBOX_TOOLTIP}}}">
         </form>
       </div>
         <input type="checkbox" id="kiwix_button_show_toggle">

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=49365e9c" rel="Stylesheet" />
+<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" 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=5982280c" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" 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=49365e9c" rel="Stylesheet" />
+<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" 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=5982280c" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" 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=49365e9c" rel="Stylesheet" />
+<link type="text/css" href="/ROOT/skin/taskbar.css?cacheid=44515708" 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=5982280c" defer></script>
+<script type="text/javascript" src="/ROOT/skin/taskbar.js?cacheid=0ce2deb2" defer></script>
 <script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
 </head>
   <body><span class="kiwix">
@@ -535,8 +535,7 @@ std::string TestContentIn404HtmlResponse::searchPatternInput() const
   const std::string searchboxTooltip = isTranslatedVersion()
                                     ? "Որոնել '" + bookTitle + "'֊ում"
                                     : "Search '" + bookTitle + "'";
-
+  return R"(          <input autocomplete="off" id="kiwixsearchbox" name="pattern" type="text" size="50" title=")"
-  return R"(          <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" title=")"
        + searchboxTooltip
        + R"(" aria-label=")"
        + searchboxTooltip