Merge pull request #796 from kiwix/noJquery

No jquery

README.md

@@ -173,14 +173,6 @@ To use JS provided by kiwix-serve you can use the following template to start wi
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title><-- Custom Tittle --></title>
-    <script
-      type="text/javascript"
-      src="{{root}}/skin/jquery-ui/external/jquery/jquery.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="{{root}}/skin/jquery-ui/jquery-ui.min.js"
-    ></script>
     <script src="{{root}}/skin/isotope.pkgd.min.js" defer></script>
     <script src="{{root}}/skin/iso6391To3.js"></script>
     <script type="text/javascript" src="{{root}}/skin/index.js" defer></script>

static/resources_list.txt

@@ -1,22 +1,3 @@
-skin/jquery-ui/jquery-ui.structure.min.css
-skin/jquery-ui/jquery-ui.min.js
-skin/jquery-ui/external/jquery/jquery.js
-skin/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png
-skin/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png
-skin/jquery-ui/images/ui-icons_222222_256x240.png
-skin/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png
-skin/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png
-skin/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png
-skin/jquery-ui/images/ui-icons_2e83ff_256x240.png
-skin/jquery-ui/images/ui-icons_cd0a0a_256x240.png
-skin/jquery-ui/images/ui-icons_888888_256x240.png
-skin/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png
-skin/jquery-ui/images/animated-overlay.gif
-skin/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png
-skin/jquery-ui/images/ui-icons_454545_256x240.png
-skin/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png
-skin/jquery-ui/jquery-ui.theme.min.css
-skin/jquery-ui/jquery-ui.min.css
 skin/caret.png
 skin/bittorrent.png
 skin/magnet.png
@@ -27,6 +8,7 @@ skin/taskbar.js
 skin/iso6391To3.js
 skin/isotope.pkgd.min.js
 skin/index.js
+skin/autoComplete.min.js
 skin/taskbar.css
 skin/index.css
 skin/fonts/Poppins.ttf
@@ -53,3 +35,5 @@ templates/url_of_search_results_css
 opensearchdescription.xml
 ft_opensearchdescription.xml
 catalog_v2_searchdescription.xml
+skin/css/autoComplete.css
+skin/css/images/search.svg

static/skin/css/autoComplete.css

@@ -0,0 +1,91 @@
+.autoComplete_wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.autoComplete_wrapper > input {
+  width: 370px;
+  height: 40px;
+  padding-left: 20px;
+  font-size: 1rem;
+  color: rgba(123, 123, 123, 1);
+  border-radius: 8px;
+  border: 0;
+  outline: none;
+  background-color: #f1f3f4;
+}
+
+.autoComplete_wrapper > input::placeholder {
+  color: rgba(123, 123, 123, 0.5);
+  transition: all 0.3s ease;
+}
+
+.autoComplete_wrapper > ul {
+  position: absolute;
+  max-height: 226px;
+  overflow-y: scroll;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 0;
+  margin: 0.5rem 0 0;
+  border-radius: 0.6rem;
+  background-color: #fff;
+  box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
+  border: 1px solid rgba(33, 33, 33, 0.07);
+  z-index: 1000;
+  outline: none;
+}
+
+.autoComplete_wrapper > ul[hidden],
+.autoComplete_wrapper > ul:empty {
+  display: block;
+  opacity: 0;
+  transform: scale(0);
+}
+
+.autoComplete_wrapper > ul > li {
+  margin: 0.3rem;
+  padding: 0.3rem 0.5rem;
+  list-style: none;
+  text-align: left;
+  font-size: 1rem;
+  color: #212121;
+  border-radius: 0.35rem;
+  background-color: rgba(255, 255, 255, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.2s ease;
+}
+
+.autoComplete_wrapper > ul > li::selection {
+  color: rgba(#ffffff, 0);
+  background-color: rgba(#ffffff, 0);
+}
+
+.autoComplete_wrapper > ul > li:hover {
+  cursor: pointer;
+  background-color: rgba(123, 123, 123, 0.1);
+}
+
+.autoComplete_wrapper > ul > li mark {
+  background-color: transparent;
+  color: rgba(255, 122, 122, 1);
+  font-weight: bold;
+}
+
+.autoComplete_wrapper > ul > li mark::selection {
+  color: rgba(#ffffff, 0);
+  background-color: rgba(#ffffff, 0);
+}
+
+.autoComplete_wrapper > ul > li[aria-selected="true"] {
+  background-color: rgba(123, 123, 123, 0.1);
+}
+
+@media only screen and (max-width: 600px) {
+  .autoComplete_wrapper > input {
+    width: 18rem;
+  }
+}

static/skin/css/images/search.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false" x="0px" y="0px" width="30" height="30" viewBox="0 0 171 171" style=" fill:#000000;">
+    <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+        <path d="M0,171.99609v-171.99609h171.99609v171.99609z" fill="none"></path>
+        <g fill="#ff7a7a">
+            <path d="M74.1,17.1c-31.41272,0 -57,25.58728 -57,57c0,31.41272 25.58728,57 57,57c13.6601,0 26.20509,-4.85078 36.03692,-12.90293l34.03301,34.03301c1.42965,1.48907 3.55262,2.08891 5.55014,1.56818c1.99752,-0.52073 3.55746,-2.08067 4.07819,-4.07819c0.52073,-1.99752 -0.0791,-4.12049 -1.56818,-5.55014l-34.03301,-34.03301c8.05215,-9.83182 12.90293,-22.37682 12.90293,-36.03692c0,-31.41272 -25.58728,-57 -57,-57zM74.1,28.5c25.2517,0 45.6,20.3483 45.6,45.6c0,25.2517 -20.3483,45.6 -45.6,45.6c-25.2517,0 -45.6,-20.3483 -45.6,-45.6c0,-25.2517 20.3483,-45.6 45.6,-45.6z"></path>
+        </g>
+    </g>
+</svg>

static/skin/index.js

@@ -1,5 +1,5 @@
 (function() {
-    const root = $(`link[type='root']`).attr('href');
+    const root = document.querySelector(`link[type='root']`).getAttribute('href');
     const incrementalLoadingParams = {
         start: 0,
         count: viewPortToCount()
@@ -320,7 +320,7 @@
         const booksToFilter = new Set();
         const booksToDelete = new Set();
         iso.arrange({
-            filter: function (idx, elem) {
+            filter: function (elem) {
                 const id = elem.getAttribute('data-id');
                 const retVal = bookOrderMap.has(id);
                 if (retVal) {

static/skin/taskbar.css

@@ -9,6 +9,8 @@
     transition: 0.3s;
     width: 100%;
     box-sizing: border-box;
+    background: #e3e3e3;
+    border-bottom: 1px solid #aaa;
 }
 
 #kiwixtoolbar>a {
@@ -100,7 +102,6 @@ label[for="kiwix_button_show_toggle"],
 }
 
 .kiwix #kiwixtoolbar #kiwixsearchform input[type='text'] {
-    position: absolute;
     left: 0;
     box-sizing: border-box !important;
     width: 100%;
@@ -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

@@ -3,95 +3,120 @@ function htmlDecode(input) {
     return doc.documentElement.textContent;
 }
 
-const jq = jQuery.noConflict(true);
-jq(document).ready(() => {
-    (function ($) {
-        const root = $( `link[type='root']` ).attr("href");
+function setupAutoHidingOfTheToolbar() {
+  let lastScrollTop = 0;
+  const delta = 5;
+  let didScroll = false;
+  const kiwixToolBar = document.querySelector('#kiwixtoolbar');
 
-        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";
-        $( "#kiwixsearchbox" ).autocomplete({
-    
-            source: `${root}/suggest?content=${bookName}&userlang=${userlang}`,
-            dataType: "json",
-            cache: false,
-    
-            response: function( event, ui ) {
-                  for(const item of ui.content) {
-                      item.label = htmlDecode(item.label);
-                      item.value = htmlDecode(item.value);
-                      if (item.path) item.path = htmlDecode(item.path);
-                  }
-            },
-    
-            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 ) {
-            return $( "<li>" )
-              .data( "ui-autocomplete-item", item )
-              .append( item.label )
-              .appendTo( ul );
-        };
-    
-        /* cybook hack */
-        if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {
-            $("html").addClass("cybook");
-        }
-    
-        if ($(window).width() < 520) {
-            var didScroll;
-            var lastScrollTop = 0;
-            var delta = 5;
-            // on scroll, let the interval function know the user has scrolled
-            $(window).scroll(function (event) {
-                didScroll = true;
-            });
-            // run hasScrolled() and reset didScroll status
-            setInterval(function () {
-                if (didScroll) {
-                    hasScrolled();
-                    didScroll = false;
-                }
-            }, 250);
-            function hasScrolled() {
-                var st = $(this).scrollTop();
-    
-                // Make sure they scroll more than delta
-                if (Math.abs(lastScrollTop - st) <= delta)
-                    return;
-    
-                // If they scrolled down and are past the navbar, add class .nav-up.
-                // This is necessary so you never see what is "behind" the navbar.
-                if (st > lastScrollTop) {
-                    // Scroll Down
-                    $('#kiwixtoolbar').css({ top: '-100%' });
-                } else {
-                    // Scroll Up
-                    $('#kiwixtoolbar').css({ top: '0' });
-                }
-    
-                lastScrollTop = st;
-            }
-        }
-    
-        $('#kiwixsearchbox').on({
-            focus: function () {
-                $('.kiwix_searchform').addClass('full_width');
-                $('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').addClass('searching');
-            },
-            blur: function () {
-                $('.kiwix_searchform').removeClass('full_width');
-                $('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').removeClass('searching');
-            }
-        });
-    })(jq);
-})
+  window.addEventListener('scroll', () => {
+    didScroll = true;
+  });
+
+  setInterval(function() {
+    if (didScroll) {
+      hasScrolled();
+      didScroll = false;
+    }
+  }, 250);
+
+  function hasScrolled() {
+    const st = document.documentElement.scrollTop || document.body.scrollTop;
+    if (Math.abs(lastScrollTop - st) <= delta)
+        return;
+
+    if (st > lastScrollTop) {
+        kiwixToolBar.style.top = '-100%';
+    } else {
+        kiwixToolBar.style.top = '0';
+    }
+
+    lastScrollTop = st;
+  }
+
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const root = document.querySelector(`link[type='root']`).getAttribute("href");
+  const bookName = (window.location.pathname == `${root}/search`)
+    ? (new URLSearchParams(window.location.search)).get('content')
+    : window.location.pathname.split(`${root}/`)[1].split('/')[0];
+
+  const autoCompleteJS = new autoComplete(
+    {
+      selector: "#kiwixsearchbox",
+      placeHolder: document.querySelector("#kiwixsearchbox").title,
+      threshold: 1,
+      debounce: 300,
+      data : {
+        src: async (query) => {
+          try {
+            // Fetch Data from external Source
+            const source = await fetch(`${root}/suggest?content=${encodeURIComponent(bookName)}&term=${encodeURIComponent(query)}`);
+            const data = await source.json();
+            return data;
+          } catch (error) {
+            return error;
+          }
+        },
+        keys: ['label'],
+      },
+      submit: true,
+      searchEngine: (query, record) => {
+        // We accept all records
+        return true;
+      },
+      resultsList: {
+        noResults: true,
+        /* We must display 10 results (requested) + 1 potential link to do a full text search. */
+        maxResults: 11,
+      },
+      resultItem: {
+        element: (item, data) => {
+          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) {}
+  });
+
+  const kiwixSearchBox = document.querySelector('#kiwixsearchbox');
+  const kiwixSearchForm = document.querySelector('.kiwix_searchform');
+  kiwixSearchBox.addEventListener('focus', () => {
+      kiwixSearchForm.classList.add('full_width');
+      document.querySelector('label[for="kiwix_button_show_toggle"]').classList.add('searching');
+      document.querySelector('.kiwix_button_cont').classList.add('searching');
+  });
+  kiwixSearchBox.addEventListener('blur', () => {
+      kiwixSearchForm.classList.remove('full_width');
+      document.querySelector('label[for="kiwix_button_show_toggle"]').classList.remove('searching');
+      document.querySelector('.kiwix_button_cont').classList.remove('searching');
+  });
+
+  // cybook hack
+  if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {
+      document.querySelector('html').classList.add('cybook');
+  }
+
+  if (document.body.clientWidth < 520) {
+    setupAutoHidingOfTheToolbar();
+  }
+  
+});

static/templates/head_taskbar.html

@@ -1,6 +1,4 @@
-<link type="text/css" href="{{root}}/skin/jquery-ui/jquery-ui.min.css?KIWIXCACHEID" rel="Stylesheet" />
-<link type="text/css" href="{{root}}/skin/jquery-ui/jquery-ui.theme.min.css?KIWIXCACHEID" rel="Stylesheet" />
 <link type="text/css" href="{{root}}/skin/taskbar.css?KIWIXCACHEID" rel="Stylesheet" />
-<script type="text/javascript" src="{{root}}/skin/jquery-ui/external/jquery/jquery.js?KIWIXCACHEID" defer></script>
-<script type="text/javascript" src="{{root}}/skin/jquery-ui/jquery-ui.min.js?KIWIXCACHEID" defer></script>
+<link type="text/css" href="{{root}}/skin/css/autoComplete.css?KIWIXCACHEID" rel="Stylesheet" />
 <script type="text/javascript" src="{{root}}/skin/taskbar.js?KIWIXCACHEID" defer></script>
+<script type="text/javascript" src="{{root}}/skin/autoComplete.min.js?KIWIXCACHEID"></script>

static/templates/index.html

@@ -4,24 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Welcome to Kiwix Server</title>
-    <script
-      type="text/javascript"
-      src="{{root}}/skin/jquery-ui/external/jquery/jquery.js?KIWIXCACHEID"
-    ></script>
-    <script
-      type="text/javascript"
-      src="{{root}}/skin/jquery-ui/jquery-ui.min.js?KIWIXCACHEID"
-    ></script>
-    <link
-      type="text/css"
-      href="{{root}}/skin/jquery-ui/jquery-ui.min.css?KIWIXCACHEID"
-      rel="Stylesheet"
-    />
-    <link
-      type="text/css"
-      href="{{root}}/skin/jquery-ui/jquery-ui.theme.min.css?KIWIXCACHEID"
-      rel="Stylesheet"
-    />
     <link
       type="text/css"
       href="{{root}}/skin/index.css?KIWIXCACHEID"

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

@@ -41,11 +41,6 @@ typedef std::vector<Resource> ResourceCollection;
 const ResourceCollection resources200Compressible{
   { WITH_ETAG, "/ROOT/" },
 
-  { WITH_ETAG, "/ROOT/skin/jquery-ui/jquery-ui.structure.min.css" },
-  { WITH_ETAG, "/ROOT/skin/jquery-ui/jquery-ui.min.js" },
-  { WITH_ETAG, "/ROOT/skin/jquery-ui/external/jquery/jquery.js" },
-  { WITH_ETAG, "/ROOT/skin/jquery-ui/jquery-ui.theme.min.css" },
-  { WITH_ETAG, "/ROOT/skin/jquery-ui/jquery-ui.min.css" },
   { WITH_ETAG, "/ROOT/skin/taskbar.js" },
   { WITH_ETAG, "/ROOT/skin/taskbar.css" },
   { WITH_ETAG, "/ROOT/skin/block_external.js" },
@@ -66,7 +61,6 @@ const ResourceCollection resources200Compressible{
 };
 
 const ResourceCollection resources200Uncompressible{
-  { WITH_ETAG, "/ROOT/skin/jquery-ui/images/animated-overlay.gif" },
   { WITH_ETAG, "/ROOT/skin/caret.png" },
 
   { WITH_ETAG, "/ROOT/raw/zimfile/meta/Title" },
@@ -175,16 +169,12 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
   const std::vector<UrlAndExpectedResult> testData{
     {
       /* url */ "/ROOT/",
-R"EXPECTEDRESULT(      src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cacheid=1d85f0f3"
-      src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff"
-      href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3"
-      href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9"
-      href="/ROOT/skin/index.css?cacheid=56e818cd"
+R"EXPECTEDRESULT(      href="/ROOT/skin/index.css?cacheid=56e818cd"
         src: url("/ROOT/skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
           src: url("/ROOT/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script src="/ROOT/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=a0307d03" defer></script>
+    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=76440e7a" defer></script>
 )EXPECTEDRESULT"
     },
     {
@@ -197,12 +187,10 @@ 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" />
-<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>
+R"EXPECTEDRESULT(<link type="root" href="/ROOT"><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/taskbar.js?cacheid=1aec4a68" 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,12 +199,10 @@ R"EXPECTEDRESULT(<link type="root" href="/ROOT"><link type="text/css" href="/ROO
       // a page rendered from static/templates/no_search_result_html
       /* url */ "/ROOT/search?content=poor&pattern=whatever",
 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" />
-<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>
+  <link type="root" href="/ROOT"><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/taskbar.js?cacheid=1aec4a68" 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"
     },
@@ -443,12 +429,10 @@ std::string TestContentIn404HtmlResponse::expectedResponse() const
 )FRAG",
 
     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" />
-<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>
+  <link type="root" href="/ROOT"><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/taskbar.js?cacheid=1aec4a68" defer></script>
+<script type="text/javascript" src="/ROOT/skin/autoComplete.min.js?cacheid=1191aaaf"></script>
 </head>
   <body><span class="kiwix">
   <span id="kiwixtoolbar" class="ui-widget-header">
@@ -531,10 +515,9 @@ std::string TestContentIn404HtmlResponse::hiddenBookNameInput() const
 std::string TestContentIn404HtmlResponse::searchPatternInput() const
 {
   const std::string searchboxTooltip = isTranslatedVersion()
-                                     ? "Որոնել '" + bookTitle + "'֊ում"
-                                     : "Search '" + bookTitle + "'";
-
-  return R"(          <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" title=")"
+                                    ? "Որոնել '" + bookTitle + "'֊ում"
+                                    : "Search '" + bookTitle + "'";
+  return R"(          <input autocomplete="off" id="kiwixsearchbox" name="pattern" type="text" size="50" title=")"
        + searchboxTooltip
        + R"(" aria-label=")"
        + searchboxTooltip