Only load searchindex when needed

Author: GuillaumeGomez

src/theme/index.hbs

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

src/theme/searcher/searcher.js

@@ -259,6 +259,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', function(e) { searchIconClickHandler(); }, false);
         searchbar.addEventListener('keyup', function(e) { searchbarKeyUpHandler(); }, false);
@@ -271,7 +282,9 @@ window.search = window.search || {};
         // If reloaded, do the search or mark again, depending on the current url parameters
         doSearchOrMarkFromUrl();
     }
-    
+
+    initSearchInteractions();
+
     function unfocusSearchbar() {
         // hacky, but just focusing a div only works once
         var tmp = document.createElement('input');
@@ -280,7 +293,7 @@ window.search = window.search || {};
         tmp.focus();
         tmp.remove();
     }
-    
+
     // On reload or browser history backwards/forwards events, parse the url and do search or mark
     function doSearchOrMarkFromUrl() {
         // Check current URL for search request
@@ -313,7 +326,7 @@ window.search = window.search || {};
             }
         }
     }
-    
+
     // Eventhandler for keyevents on `document`
     function globalKeyHandler(e) {
         if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea' || e.target.type === 'text' || !hasFocus() && /^(?:input|select|textarea)$/i.test(e.target.nodeName)) { return; }
@@ -364,8 +377,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 {
@@ -443,10 +471,10 @@ window.search = window.search || {};
     function doSearch(searchterm) {
         // Don't search the same twice
         if (current_searchterm == searchterm) { return; }
-        else { current_searchterm = searchterm; }
-
         if (searchindex == null) { return; }
 
+        current_searchterm = searchterm;
+
         // Do the actual search
         var results = searchindex.search(searchterm, search_options);
         var resultcount = Math.min(results.length, results_options.limit_results);
@@ -467,19 +495,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);

tests/gui/search.goml

@@ -1,8 +1,5 @@
 // This tests basic search behavior.
 
-// We disable the requests checks because `searchindex.json` will always fail
-// locally (due to CORS), but the searchindex.js will succeed.
-fail-on-request-error: false
 go-to: |DOC_PATH| + "index.html"
 
 define-function: (