Only load searchindex when needed

Author: GuillaumeGomez

src/front-end/searcher/searcher.js

@@ -267,6 +267,17 @@ window.search = window.search || {};
         doc_urls = config.doc_urls;
         searchindex = elasticlunr.Index.load(config.index);
 
+        searchbar.removeAttribute("disabled");
+        searchbar.focus();
+
+        const searchterm = searchbar.value.trim();
+        if (searchterm !== "") {
+            searchbar.classList.add("active");
+            doSearch(searchterm);
+        }
+    }
+
+    function initSearchInteractions() {
         // Set up events
         searchicon.addEventListener('click', () => {
             searchIconClickHandler();
@@ -290,6 +301,8 @@ window.search = window.search || {};
         doSearchOrMarkFromUrl();
     }
 
+    initSearchInteractions();
+
     function unfocusSearchbar() {
         // hacky, but just focusing a div only works once
         const tmp = document.createElement('input');
@@ -396,8 +409,23 @@ window.search = window.search || {};
         }
     }
 
+    function loadScript(url, id) {
+        if (document.getElementById(id)) {
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = url;
+        script.id = id;
+        script.onload = () => init(window.search);
+        script.onerror = error => {
+            console.error(`Failed to load \`${url}\`: ${error}`);
+        };
+        document.head.append(script);
+    }
+
     function showSearch(yes) {
         if (yes) {
+            loadScript(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
             search_wrap.classList.remove('hidden');
             searchicon.setAttribute('aria-expanded', 'true');
         } else {
@@ -478,16 +506,15 @@ window.search = window.search || {};
 
     function doSearch(searchterm) {
         // Don't search the same twice
-        if (current_searchterm === searchterm) {
+        if (current_searchterm == searchterm) {
             return;
-        } else {
-            current_searchterm = searchterm;
         }
-
-        if (searchindex === null) {
+        if (searchindex == null) {
             return;
         }
 
+        current_searchterm = searchterm;
+
         // Do the actual search
         const results = searchindex.search(searchterm, search_options);
         const resultcount = Math.min(results.length, results_options.limit_results);
@@ -508,19 +535,6 @@ window.search = window.search || {};
         showResults(true);
     }
 
-    function loadScript(url, id) {
-        const script = document.createElement('script');
-        script.src = url;
-        script.id = id;
-        script.onload = () => init(window.search);
-        script.onerror = error => {
-            console.error(`Failed to load \`${url}\`: ${error}`);
-        };
-        document.head.append(script);
-    }
-
-    loadScript(path_to_root + '{{ resource "searchindex.js" }}', 'search-index');
-
     // Exported functions
     search.hasFocus = hasFocus;
 })(window.search);

src/front-end/templates/index.hbs

@@ -173,7 +173,7 @@
                 {{#if search_enabled}}
                 <div id="search-wrapper" class="hidden">
                     <form id="searchbar-outer" class="searchbar-outer">
-                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header" disabled>
                     </form>
                     <div id="searchresults-outer" class="searchresults-outer hidden">
                         <div id="searchresults-header" class="searchresults-header"></div>