Only load searchindex when needed

Author: GuillaumeGomez

src/front-end/searcher/searcher.js

@@ -262,6 +262,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(config) {
         // Set up events
         searchicon.addEventListener('click', () => {
             searchIconClickHandler();
@@ -288,6 +299,8 @@ window.search = window.search || {};
         config.hasFocus = hasFocus;
     }
 
+    initSearchInteractions(window.search);
+
     function unfocusSearchbar() {
         // hacky, but just focusing a div only works once
         const tmp = document.createElement('input');
@@ -401,8 +414,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 {
@@ -483,16 +511,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);
@@ -513,17 +540,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

@@ -186,7 +186,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>